Problems with html forms.

Question

My form views fine in IE7 and IE8 but FireFox does not display the form correctly: The problem is it does not display the form inside my "mainContent1"

Note my code below:

<div id="mainContent1">
<form action="forms.php" target="_self">
<fieldset>
<legend>Postal Address</legend>  
<label for="street">Street address:</label>
<input id="street" name="street" type="text" />
<label for=" suburb">County</label>
<input id="county" name="county" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="text" />
</fieldset>
</form>
</div>


fieldset {      
float: left;      
clear: both;      
width: 100%;      
margin: 0 0 -1em 0;      
padding: 0 0 1em 0;      
border-style: none;      
border-top: 1px solid #BFBAB0;      
background-color: #F2EFE9;    
}

legend {  
margin-left: 1em;  
color: #000000;  
font-weight: bold;  
}  

fieldset ol {  
padding: 1em 1em 0 1em;  
list-style: none;  
}  

fieldset li {  
padding-bottom: 1em;  
} 

fieldset.submit {  
border-style: none;  
}

label em {        
display: block;        
color: #060;        
font-size: 85%;        
font-style: normal;        
text-transform: uppercase;      
}

Answer 1

Try putting a clearing div at the bottom, inside of #mainContent1...

<div id="mainContent1">
<form action="forms.php" target="_self">
<fieldset>
<legend>Postal Address</legend>  
<label for="street">Street address:</label>
<input id="street" name="street" type="text" />
<label for=" suburb">County</label>
<input id="county" name="county" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="text" />
</fieldset>
</form>
<div style="clear:both"></div>
</div>

Answer 2

Hey guys/gals thanks... All of you were correct it was my css. My css was all goofed up. Thanks for pointing me in the right direction.

Answer 3

Don't use a clearing div, it is cleaner to use the ".clearfix" method of clearing.

.clearfix:after{content:".";display:block;clear:both;height:0;visibility:hidden}

However, for IE you will need to add this to your IE css file:

.clearfix{zoom:1}

Then you simply add the class to the container element to clear the floats correctly.

<div id="mainContent1" class="clearfix">
<form action="forms.php" target="_self">
<fieldset>
<legend>Postal Address</legend>  
<label for="street">Street address:</label>
<input id="street" name="street" type="text" />
<label for=" suburb">County</label>
<input id="county" name="county" type="text" />
<label for="state">State</label>
<input id="state" name="state" type="text" />
<label for="zip">Zip Code</label>
<input id="zip" name="zip" type="text" />
</fieldset>
</form>
</div>

This removes the need for extra empty elements within your HTML.