CSS로 인한 문제점

Question

주된 내용에 상당히 기본적인 양식을 만들려고합니다. 내가 틀린 것들을 잘못 코딩하고 있다는 것이 틀림 없어. 내 코드를 기록해 둡니다. 저는 IE 7에서 매우 넓은 수직 간격을 가지며 필드 세트 사이의 배경색이 올바르게 작동하지 않습니다. 모두 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;  
} 

이것은 내 HTML 코드입니다.

<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> 

Answer 1

첫째, ... 당신의 CSS 파일에 스크립트를 제거

파이어 폭스/준수 브라우저와 IE 치료의 전설과 필드 셋은 매우 다르게, 불행하게도 ... 그건 당신이있어 문제가 될 수 있습니다 보는 중 : http://www.456bereastreet.com/lab/styling-form-controls-revisited/fieldset/

Answer 2

ID 앞에 "#"가 있고 "."앞에 ID가 있는지 확인하십시오. 귀하의 CSS 파일에 수업 전에. 그렇게하지 않으면 혼란이 야기됩니다.