Compatibilité horizontale Menu IE7 et IE8 Problème

Question

J'ai créé un menu horizontal qui fonctionne parfaitement dans Firefox 6, IE9, Safari, Chrome et Opera mais dans IE7 & IE8 le dernier lien dans le menu passe à la ligne suivante, je joins la capture d'écran du menu.

IE9 Capture d'écran du menu horizontal http://imageshack.us/photo/my-images/819/ie9screenshot.jpg/

IE8 Capture d'écran du menu horizontal

http://imageshack.us/photo/my-images/696/ie8screenshot.jpg/

Le code HTML et CSS sont les suivantes: -

Code HTML: -

<ul class="menu"> 

     <li class="first"><a href="#">Bridal</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li><a href="#">Bridesmaid</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li><a href="#">Gentleman's</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li><a href="#">Flower Girl</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li><a href="#">Special Occassion</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li><a href="#">Accessories</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li><a href="#">Shoes</a></li> 

     <li><img src="images/divider.jpg" alt="Divider" /></li> 

     <li class="last"><a href="#">Sale</a></li> 

    </ul> <!-- END OF MENU --> 

CSS Code: -

ul.menu { 
width: 965px; 
height: 44px; 
font-size: 18px; 
color: #ffffff; 
list-style: none; 
margin: 0px; 
padding: 0px; 
} 

ul.menu li { 
float: left; 
background-repeat: no-repeat; 
margin: 0px; 
padding: 0px; 
} 

ul.menu li a { 
height: 34px; 
color: #ffffff; 
text-align: center; 
display: block; 
background-image: url(images/menu-normal.jpg); 
background-repeat: repeat-x; 
margin: 0px; 
padding: 10px 17px 0px 17px; 
} 

ul.menu li.first { 
background: none; 
} 

ul.menu li.first a { 
width: 88px; 
background-image: url(images/first-normal.png); 
margin: 0px; 
padding: 10px 0px 0px 8px; 
} 

ul.menu li a:hover { 
background-image: url(images/menu-hover.jpg); 
background-repeat: repeat-x; 
} 

ul.menu li.first a:hover { 
background-image: url(images/first-hover.png); 
} 

ul.menu li.last a { 
width: 68px; 
background-image: url(images/last-normal.png); 
margin: 0px; 
padding: 10px 8px 0px 0px; 
} 

ul.menu li.last a:hover { 
width: 68px; 
background-image: url(images/last-hover.png); 
} 

J'ai trouvé quelques articles similaires dans ce domaine et d'autres forums, mais aucun d'entre eux ont été utiles. J'ai essayé la liste-position: à l'intérieur; affichage: en ligne; etc mais aucun d'entre eux ne fonctionne. Un détail de plus, je regarde la page html dans le navigateur IE9, mais en les vérifiant dans le mode de compatibilité IE7 et IE8.

Merci, Raj

Answer 1

J'ai eu le même problème, il semble que IE à ajouter des marges invisibles et le rembourrage de sorte que vous pouvez donner votre menu un peu plus de largeur et fixer la position après, je suggère d'utiliser un autre fichier css pour IE.