I am having some problems with my webpage displaying properly in firefox, In IE the page displays fine, but in Mozilla there is a big gap between the text above the form (For faster service, please....etc) and the form itself, I cannot workout why!?
HTML:
<h2 class="title_main_contact">Feed Me</h2>
<ul id="addressarea">
<li><h3><img src="Images/contact_bn.gif" /></h3></li>
<li class="contact_space"><span class="txt_pink">Business</span></li>
<li>22 Whimple Street</li>
<li>Plymouth</li>
<li>Devon</li>
<li class="contact_space"><img src="Images/icon_phone.gif" alt="Telephone" /><span class="txt_pink">01752 666666</span></li>
<li><img src="Images/icon_fax.gif" alt="Fax" /><span class="txt_pink">01752 666666</span></li>
</ul>
<div id="contactform">
<h3>Get In Touch</h3>
<p>For faster service, please check out the Common Questions to the right, as well as the FAQ Help Section.
If your question still hasn't been answered, please contact us using the form below and we will get back to you within 3 business days.
Please make sure service@business.com is not blocked by a spam filter. </p>
<form action="" method="post">
<input type="hidden" name="send" value="send" />
<div class="row">
<label for="name">Name</label>
<span class="form"><input id="name" name="name" type="text" class="inputNormal" value="" /></span>
</div>
<div class="row">
<label for="address">Address</label>
<span class="form"><textarea id="address" name="address" class="inputNormal" cols="12" rows="6"></textarea></span>
</div>
<div class="row">
<label for="email">Email (required)</label>
<span class="form"><input id="email" name="email" type="text" class="inputNormal" value="" /></span></div>
<div class="row">
<label for="telephone">Telephone</label>
<span class="form"><input id="telephone" name="telephone" type="text" class="inputNormal" value="" /></span>
</div>
<div class="row">
<label for="fax">Fax</label>
<span class="form"><input id="fax" name="fax" type="text" class="inputNormal" value="" /></span>
</div>
<div class="row">
<label for="enquiry">Enquiry</label>
<span class="form"><textarea id="enquiry" name="enquiry" class="inputNormal" cols="12" rows="6"></textarea></span>
</div>
<div class="row">
<label for="found">How did you find us?</label>
<span class="form"><select id="found" name="found" class="inputNormal">
<option value="Not selected">Please select...</option>
<option value="Search engine">Search engine</option>
<option value="Word of mouth">Word of mouth</option>
<option value="Link on another website">Link on another website</option>
<option value="Flyer/poster">Flyer/poster</option>
<option value="Other">Other</option>
</select></span>
</div>
<div class="row">
<span class="label"> </span>
</div>
<input class="inputButton2" type="image" src="Images/button_checkout.gif" alt="Send" title="Send contact request" />
</form>
</div>
CSS:
/**********************************************\
CONTACT US
\**********************************************/
input {
padding:2px;
border:none;
}
#addressarea {
float:left;
width:145px;
}
#addressarea img{
vertical-align:middle;
}
.contact_space {
margin:20px 0 0;
}
#contactform {
width:420px;
margin:0 0 0 205px;
border:1px solid #e4e4e4;
padding:0 0 10px;
}
#contactform p {
margin:0px 9px 5px 9px;
}
#contactform h3 {
width:420;
background:#e4e4e4;
padding: 5px 0 4px 10px;
margin:0 0 20px 0px;
}
#contactform h4 img {
padding:5px 0 0 5px;
}
div.row {
margin:0;
padding:5px 0 0 5px;
clear:both;
}
* html div.row {
margin:4px 0 0;
}
div.row span.label,div.row label {
float:left;
text-align:right;
width:150px;
padding:0 8px 0 0;
vertical-align:bottom;
line-height:1.5em;
}
* html div.row span.label,* html div.row label {
padding-top:0;
}
div.row span.form {
float:left;
text-align:left;
padding-right:10px;
vertical-align:bottom;
line-height:1.5em;
}
input.inputNormal,select.inputNormal,textarea.inputNormal {
width:195px;
color:#000;
border:1px solid #dcdcdc;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
float:none;
background:#ffffff;
}
textarea.inputNormal {
height:60px;
}
select.inputNormal {
height:20px;
}
input.inputNormal {
height:14px;
}