No replies
samborine
samborine's picture
Offline
newbie
Last seen: 10 years 3 weeks ago
Timezone: GMT+10
Joined: 2012-06-09
Posts: 4
Points: 7

Hi,
This is my first post so please bear with me.
First off I've tried to validate the page and as far as i can see the errors coming up are unrelated to the problems i am having.( All the errors refer to the actual contact for inside the middle2 div. And i have no idea how to fix them, but i'll tackle that later.)I've also used the doctype suggested ()
My problem is:
I have a div called .middle2 that is supposed to go inside the #box. this happens on IE9 no problems.
In firefox it is displaying outside #box.

I've counted the

so many times and as far as i can see ie9 is rendering correctly and firefox is not. I am using firefox 12.0.

I've whittledthe css down a bit but left the html as is just in case its something in the form thats making it display like that.. None of the other pages on the site are having the same problem.
website is pclean.com.au/contact-us.html
HTML is

[<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Contact Us</title>
	<script src="freecontactformvalidation.js"></script>
	<script>
	required.add('Full_Name','NOT_EMPTY','Full Name');
	required.add('Email_Address','EMAIL','Email Address');
	required.add('Your_Message','NOT_EMPTY','Your Message');
	required.add('AntiSpam','NOT_EMPTY','Anti-Spam Question');
	</script>
	<link rel="stylesheet" type="text/css" href="freecontactform.css"><link rel="stylesheet" type="text/css" href="pcss.css"/> 
</head>
<title>Pressure Cleaning Sales and Service-Contact Us
</title>
 
 
 
<body>
<div id="wrapper">
<div id="header">
        	<a href="index.html"><center><img src="images/header.gif" alt="Pressure Cleaning Sales and Service" /></center></a>
</div>
        	<div id="box">
 
 
 
 <div class="left"><div class="nav"><center><a href="index.html">Home</a>
 <a href="company-profile.html">Company Profile</a>
 <a href="services.html">Services</a>
 <a href="complete-units.html">Complete Units</a>
 <a href="accessories.html">Accessories</a>
 <a href="repair-and-maintenance.html">Repair and Maintenance</a>
   <div class="current"><a href="contact-us.html">Contact Us</center></a></div>
   <div class="image002"><img src="images/image001.gif" alt="Interpump" /></div>
   <div class="leftcontact"><div class="contact"><p><center><h1>Contact us</h1></p><p>Peter Linton: <b>0408 580 000</b></br>Fax : <b>07 3395 8458</b></br></p></center></div></div>
   </div></div>
<div class="middle2">
 
 
 
	<form name="freecontactform" method="post" action="freecontactformprocess.php" onsubmit="return validate.check(this)">
	<table width="400px" class="freecontactform">
	<tr>
	 <td colspan="2">
 
	 <div class="freecontactformheader">For advice on products, services or to discuss a free quote, please contact Peter Linton</div>
 
	 <div class="freecontactformmessage">Fields marked with <span class="required_star"> * </span> are mandatory.</div>
 
	 </td>
	</tr>
	<tr>
	 <td valign="top">
	  <label for="Full_Name" class="required">Full Name<span class="required_star"> * </span></label>
	 </td>
	 <td valign="top">
	  <input type="text" name="Full_Name" id="Full_Name" maxlength="80" style="width:230px">
	 </td>
	</tr>
	<tr>
	 <td valign="top">
	  <label for="Email_Address" class="required">Email Address<span class="required_star"> * </span></label>
	 </td>
	 <td valign="top">
	  <input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:230px">
	 </td>
	</tr>
	<tr>
	 <td valign="top">
	  <label for="Telephone_Number" class="not-required">Telephone Number</label>
	 </td>
	 <td valign="top">
	  <input type="text" name="Telephone_Number" id="Telephone_Number" maxlength="100" style="width:230px">
	 </td>
	</tr>
	<tr>
	 <td valign="top">
	  <label for="Your_Message" class="required">Your Message<span class="required_star"> * </span></label>
	 </td>
	 <td valign="top">
	  <textarea style="width:230px;height:160px" name="Your_Message" id="Your_Message" maxlength="2000"></textarea>
	 </td>
	</tr>
	<tr>
	 <td colspan="2" style="text-align:center" >
	  <div class="antispammessage">
	  To help prevent automated spam, please answer this question
	  <br /><br />
		  <div class="antispamquestion">
		   <span class="required_star"> * </span>
		   Using only numbers, what is 10 plus 15? &nbsp; 
		   <input type="text" name="AntiSpam" id="AntiSpam" maxlength="100" style="width:30px">
		  </div>
	  </div>
	 </td>
	</tr>
	<tr>
	 <td colspan="2" style="text-align:center" >
	 <br /><br />
	  <input type="submit" value=" Submit Form ">
	  <br /><br />
	  <div style="font-size:0.9em">Form provided by <a href="http://www.freecontactform.com" target="_blank">Free Contact Form</a></div>
	  <br /><br />
	 </td>
	</tr>
	</table>
	</form>
 
</div></div>
 
 
 
 
 
</body>
</html>]

page CSS, doesn't include the form css.

[/*
Pcss Style Sheet
*/
 
body{
	background:#fff;
	font-family: "Times New Roman", Times, serif;
	font-size:15px;
	color:#333;
}
 
#wrapper{
	position:relative;
	width:960px;
	margin:0 auto;
}
 
#header{
	position:relative;
	margin:0 0px 0 -30px ;
	width:960px;
	padding:20px 0px 30px 0;
	height:50px
}
 
#box{
	position:relative;
	top: 90px;
	padding:20px 10px 40px 10px;
	width:885px;
	margin: 0px 0px 0 6px;
	border-radius: 30px;
	border:20px solid #ee1c25;
	background-color:#FFFFFF;
	min-height: 800px;
}
 
 
.current a:link,.current a:visited, .current a:hover, .current a:active{color:#ee1c25;
background-color:#fef200;
border:1px solid #000;}
 
 
.middle2 a:visited{
		color:#ee1c25;
		background-color:#ffffff;
		font-weight: normal;
}
 
.back{
clear:right;
 
 
}
#box .back a:link{
display:block;
font-family: georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:15px;
color:#fef200;
background-color:#ee1c25 ;
max-width:80px;
border-radius: 30px;
text-align:center;
border:1px solid #000;
padding:4px;
margin: 10px 0 10px 500px ;
text-decoration:none;
 
}
 
#box .back a:visited{
display:block;
font-family: georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:15px;
color:#fef200;
background-color:#ee1c25 ;
max-width:80px;
border-radius: 30px;
text-align:center;
border:1px solid #000;
padding:4px;
margin: 10px 0 10px 500px ;
text-decoration:none;
 
}
 
#box .back a:hover{
display:block;
font-family: georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:15px;
color:#ee1c25 ;
background-color:#fef200;
max-width:80px;
border-radius: 30px;
text-align:center;
border:1px solid #000;
padding:4px;
margin: 10px 0 10px 500px ;
text-decoration:none;
 
}
#box .back a:active{
display:block;
font-family: georgia, "Times New Roman", Times, serif;
font-weight:bold;
font-size:15px;
color:#ee1c25 ;
background-color:#fef200;
max-width:80px;
border-radius: 30px;
text-align:center;
border:1px solid #000;
padding:4px;
margin: 10px 0 10px 500px ;
text-decoration:none;
}
.left{
	width: 25%;
	padding: 10px;
	float:left;
}
 
 
 
.middle2{
	width: 65%;
	margin: 0px 0px 0px 300px;
	padding: 10px;
}
 
.middle2 a:link,.middle2 a:hover,.middle2 a:active,{
font-family: "Times New Roman", Times, serif;
font-weight:normal;
font-size:15px;
color:#0000FF;
background-color:#ffffff;
}
.middle2 a:visited{
font-family: "Times New Roman", Times, serif;
font-weight:normal;
font-size:15px;
color:#ee1c25;
 
background-color:#ffffff;
}
 
 
 
.image001{
	margin: 0px 0 0 30px ;
}
 
.contact{
	margin:20px 0 0 0;
	border-radius: 30px;
	border:2px solid #000;
	background-color:#fef200;
}
 
 
.image002{
	margin: 0px 0 0 45px ;
}
 
.product{
	border-bottom: 1px solid #a2a6a6;
	padding:10px 0px 6px 10px;
}
 
.product img{border:1px solid #000;
margin: 0 20px 0 0;
}
 
.product2 img{
	float:left;
}
 
.product h2{
	margin: -4px 0 0 0 
}
 
.leftcontact{
	margin:0px 0 0 25px;
 
}
 
.text{
	margin: 0 0 0 185px;
}