Form Positioning - Works in IE, not in FF

[Tino]

I'm having a problem with a form on this page http://www.f5webdesign.co.uk/v3/contact.htm.

It positions fine in IE, but in FF it is way off to the right. The CSS that is specific to the layout of this page is:

Code: Select all

label
{
width: 7em;
clear:both;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}
 
.submit input
{
margin-left: 7.5em;
} 
input
{
color: #000;
background: #ddedff;
border: 1px solid #2c86f3;
}
textarea
{
color: #000;
background: #ddedff;
border: 1px solid #2c86f3;
}
.submit input
{
color: #fff;
background: #0033cc;
border: 2px outset #d7b9c9;
}
fieldset
{
border: 1px solid #2c86f3;
width: 400px;
}
legend
{
color: #fff;
background: #0033cc;
border: 1px solid #2c86f3;
padding: 2px 6px;
} 
#content span.contact1 {
 float:left;
 display:block;
 width:200px;
 margin:0 0 0 auto;
 border:0;
 text-align:left;
}
#content span.contact2 {
 float:left;
 display:block;
 width:200px;
 margin:0 auto 0 0;
 border:0;
 text-align:left;
}
#content #formcontainer {
 display:block;
 width:400px;
 margin:0 auto 1.25em auto;
 border:0;
 padding:0;
}

and the HTML for the div that holds the form is:

HTML: Select all

<div id="content">
<img src="images/contacthead.jpg" alt=""/>
<div id="formcontainer">
<span class="contact1">
<span class="f5web">F5 WEBDESIGN</span><br/>
Riverview Business Centre,<br/>
Centurion Court,<br/>
North Esplanade West,<br/>
Aberdeen<br/>
AB11 5QH
</span>
<span class="contact2">
Tel - 01224 643641<br/>
Mob - 07834 186058<br/>
Email - <a href="mailto:info@f5webdesign.co.uk">info@f5webdesign.co.uk</a>
</span>
<fieldset>
<legend>Contact Us</legend>
<form method="post" action="http://homepages.force9.net/cgi-bin/form">
<p><input type="hidden" name="recipient" value="info@f5webdesign.co.uk" />
<input type="hidden" name="subject" value="Contact Form Submission" />
<input type="hidden" name="redirect" value="http://www.f5webdesign.co.uk/v3/formsubmit.htm" />
<input type="hidden" name="subject" value="Site Feedback" />
<input type="hidden" name="realname" value="Website Form" /></p>
<p><label for="Name">Name*</label> <input type="text" name="Name" id="Name" /></p>
<p><label for="companyname">Company Name</label> <input type="text" id="companyname" name="Company Name"/></p>
<p><label for="number">Phone Number</label> <input type="text" id="number" name="Phone Number" /></p>
<p><label for="e-mail">E-mail</label> <input type="text" id="e-mail" name="Email" /></p>
<p><label for="query">Your Query</label> <textarea name="query" cols="" rows="6" id="query"></textarea><br /></p>
<p><input type="submit" value="Submit" />
<input name="Reset" type="reset" value="Reset" />
</p>
</form>
</fieldset>
</div>

The form doesn't want to drop below the text that's in 'span class="contact2"' and I can't work out why. I've tried some use of 'clear' but it didn't work, but not sure if I was using it right.

It is CSS and XHTML 1.0 valid.

Any help greatly appreciated!

Cheers

[juanma]

May be your problem are in width: 7em; or margin propieties in <label> elements.
if you can not see the problem so pot a background-color style in the <fieldset> or <label> elements for see the problem.
bye