Problems with a from CSS

Posted by Michael on Stack Overflow See other posts from Stack Overflow or by Michael
Published on 2010-04-01T04:18:54Z Indexed on 2010/04/01 4:23 UTC
Read the original article Hit count: 258

Filed under:

I am trying to create a fairly basic form with in my maincontent. I am sure I am coding things incorrectly and it is driving me crazy. Note my code. I get extremely wide vertical spacing in IE 7 and the bacground color between the field sets does not work correctly. All is good in FF.

My CSS is:
fieldset {  
margin: 1.5em 0 0 0;  
padding: 0;  
border-style: none;      
border-top: 1px solid #BFBAB0;      
background-color: #FFFFFF;    
}  
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;  
}

{
var w = document.myform.mylist.selectedIndex;
var selected_text = document.myform.mylist.options[w].text;
alert(selected_text); 
} 

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

This is my html code.

<div id="mainContent1">
<form name="myform">
<label for="mylist"><strong>Select an Account Type:</strong></label> 
<select name="mylist"><option value="traditional">Traditional Account</option>
<option value="paperless">Paperless Account</option>
</select>
</form>

<br /><a> </a>  

<form action="example.php">  
<fieldset>  
<legend>Contact Details</legend>  
<ol>  
<li>  
<label for="name">Name:</label>  
<input id="name" name="name" class="text" type="text" /> 
<label for="name">        
<em>required</em>      
</label> 
</li>  

<li>  
<label for="email">Email address:</label>  
<input id="email" name="email" class="text" type="text" /> 
<label for="name">        
<em>required</em> 
</li>  

<li>  
<label for="phone">Telephone:</label>  
<input id="phone" name="phone" class="text" type="text" /> 
<label for="name">        
<em>required</em> 

<ol>      
<li>      
<input id="option1" name="option1"      
class="checkbox" type="checkbox" value="1" />      
<label for="option1">Savings</label>      
</li>      

<li>      
<input id="option2" name="option2"      
class="checkbox" type="checkbox" value="1" />      
<label for="option2">Checkings</label>      
</li>      
</ol>       

</fieldset>  
<fieldset>  
<legend>Delivery Address</legend>  
<ol>  
<li>  
<label for="address1">Address 1:</label>  
<input id="address1" name="address1" class="text"  
type="text" />  
</li>  

<li>  
<label for="city">City:</label>  
<input id="city" name="city" class="text" type="text" />  
</li>  
<li>  
<label for="postcode">Zip Code:</label>  
<input id="postcode" name="postcode"  
class="text textSmall" type="text" />  
</li>  

<li>  
<label for="country">Country:</label>  
<input id="country" name="country" class="text" type="text" />  
</li>  
</ol>  
</fieldset>  

<fieldset class="submit">  
<input class="submit" type="submit" value="Submit" />  
</fieldset>  

<fieldset class="clear">  
<input class="clear" type="clear"  
value="Submit" />  
</fieldset>  
</form>

© Stack Overflow or respective owner

Related posts about css