Problème avec le menu de nav horizontal css dans IE6

Question

J'ai une question. J'ai un menu de navigation horizontal fait par le tutoriel officiel de css. Voici le CSS:

div.horizontal 
{ 
width:700px; 
height:30px; 
margin:0 auto; 
} 
div.horizontal ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
} 
div.horizontal li 
{ 
float:left; 
} 
div.horizontal a 
{ 
display:block; 
position:relative; 
padding-left:20px; 
padding-right:20px; 
padding-top:18px; 
padding-bottom:0px; 
} 
div.horizontal a:link,div.horizontal a:visited 
{ 

white-space: nowrap; 
height: 40px; 
line-height: 15px; 
font-weight: normal; 
font-size:12px; 
overflow: hidden; 
text-decoration: none; 
text-transform: uppercase; 
z-index: 100; 
color: #fff; 
cursor: pointer; 
font-family:"Trebuchet MS", Arial, sans-serif; 
} 
div.horizontal a:hover,div.horizontal a:active 
{ 
    background-image:url(images/horiz-menu-active.png); 
    background-repeat:repeat-x; 
color:#FFF; 
} 

HTML:

<div class="horizontal"> 
      <ul> 
       <li><a href="contacts.php">За контакти</a></li> 
       <li><a href="comments.php">Мнения и коментари</a></li> 
       <li><a href="media_center.php">Медиа Център</a></li> 
       <li><a href="news.php">Новини</a></li> 
       <li><a style="border-right:2px #900 solid;" href="aboutus.php">За нас</a></li> 
      </ul> 
</div> 

Dans tous les navigateurs includning IE7 et IE8, il semble normal que je veux, mais dans IE6 il est vertical. S'il vous plaît donner quelques conseils whath à faire?

exemple en direct ici: jsfiddle.net/uhRzR

Answer 1

la façon dont je peux vous suggère de résoudre ce problème pour IE6 est d'ajouter une largeur fixe pour la div.horizontal li

Exemple: http://jsfiddle.net/uhRzR/2/ < - Dans cet exemple, j'ajouté 100px largeur .

---

Une autre solution consiste à utiliser hack css pour Internet Explorer ajoutant _width:0px; pour div.horizontal li

Exemple: http://jsfiddle.net/uhRzR/5/

Answer 2

il suffit de remplacer cette partie de votre css

div.horizontal li 
{ 
float:left; 
} 
div.horizontal a 
{ 
display:block; 
position:relative; 
padding-left:20px; 
padding-right:20px; 
padding-top:18px; 
padding-bottom:0px; 
} 

avec ce

div.horizontal li 
{ 
display:inline; 
} 
div.horizontal a 
{ 
padding:18px 20px 0px 20px; 
}