Css problème de lien image-renversement - ne peut pas obtenir la navigation pour afficher horizontalement dans IE

Question

Oui, j'ai dessiné un vide sur celui-ci, et après avoir joué avec un peu le css n'est pas aussi propre que je Je voudrais que ça soit. Les images de navigation/roll-over fonctionnent comme je le veux dans Firefox, mais je ne peux pas le faire fonctionner dans IE. IE empile les liens de survol les uns sur les autres. http://www.plumberkendal.co.uk < --- son téléchargé ici, et vous pouvez voir ce que je veux dire.

1) affichage: en ligne; /// semble tuer les liens dans IE et FF.

2) affichage: bloc en ligne; /// C'est ce qui est maintenant défini, qui semble fonctionner avec FF et Chrome mais pas avec IE. Toute aide grandement appréciée!

CSS

#nav_bar 
{ 
margin-top: 10px; 
float: right; 
} 

#navigation li, #navigation a 
{ 
height:32px; display: inline-block; 
} 

#navigation li 
{ 
margin:0; padding:0; 
list-style: none outside none; 
display: inline-block; 
} 

#home li, #home a{width: 90px;} 
#home{left: 0px; width: 90px;} 
#home {background: url('../images/nav_bar.png') 0 0; } 
#home a:hover {background: url('../images/nav_bar.png') 0 -39px; } 

#portfolio li, #portfolio a {width: 128px; } 
#portfolio {left: 91px; width: 128px; } 
#portfolio {background: url('../images/nav_bar.png') -94px 0px; } 
#portfolio a:hover{background: url('../images/nav_bar.png') -94px -39px;} 

#contact li, #contact a {width: 90px; } 
#contact {left: 130px; width: 90px; } 
#contact { background: url('../images/nav_bar.png') -306px 0px; } 
#contact a:hover {background: url('../images/nav_bar.png') -306px -39px; } 

HTML

<div id="nav_bar"> 

<ul id="navigation"> 

<li id="home"><a href="index.php"><span>home</span></a></li> 
<li id="portfolio"><a href="portfolio.php"><span>portfolio</span></a></li> 
<li id="contact"><a href="contact.php"><span>contact</span></a></li> 
</ul>   

</div> 

Answer 1

Essayez avec ce code (ont pas testé, mais je pense que cela devrait fonctionner):

#nav_bar   { margin-top: 10px; float: right; } 
#navigation   { overflow:hidden; } 
#navigation li  { float:left; margin:0; padding:0; list-style: none outside none; background-image:url('../images/nav_bar.png'); } 
#navigation a  { display:block; height:32px; } 
#navigation a:hover { background-image:url('../images/nav_bar.png'); } 

#home    { background-position:0 0; } 
#home a    { width:90px; } 
#home a:hover  { background-position:0 -39px; } 

#portfolio   { background-position:-94px 0; } 
#portfolio a  { width:128px; } 
#portfolio a:hover { background-position:-94px -39px; } 

#contact   { background-position:-306px 0; } 
#contact a   { width:90px; } 
#contact a:hover { background-position:-306px -39px; }