[Résolu] Décalage d'un pixel sur un menu entre FF et Chrome/IE

Bonjour,

J'ai un petit problème de CSS que j'ai bien du mal à résoudre !
Voici le code qui pose problème.

<style type="text/css">
#cadre-principal {
	border:1px solid gray;
}

#menu { 
	margin: 0;
	margin-left:14px;
	padding: 0;
	list-style: none;
	height:25px;
}

#menu li {
	display: inline;
}

#menu li a {
	padding: 5px 20px;
	margin: 0;
	border-bottom:1px solid gray;
}
</style>

<ul id="menu">
	<li><a href="#">Menu 1</a></li>
	<li><a href="#">Menu 2</a></li>
	<li><a href="#">Menu 3</a></li>
</ul>
	
<div id="cadre-principal">
foo
</div>

Je voudrais que le border-bottom de mon menu et le border du div "cadre-principal" soient parfaitement alignés. Le résultat parait correct sur Internet Explorer et Google Chrome (la majorité l'emporte ), alors que sur Firefox j'ai un décalage en hauteur d'1 pixel.

Si quelqu'un a une idée pour résoudre le problème, n'hésitez pas !

Merci
Modifié par patoo77 (23 Apr 2010 - 00:45)

Et bien faire un hack pour Firefox.
Cela me fait mal de dire hack pour Firefox. En général ce sont kes très vieux navigateurs IE6/IE7 qui font ch?#er
mais il doit bien y avoir une méthode plus propre ..
Modifié par alexx (22 Apr 2010 - 20:45)

Bah ouai je ferai un hack au pire, mais bon c'est pas génial ! =/

Tu es en display:inline pour tes liens, c'est inévitable d'avoir un léger aléas dans le placement au pixel près du texte.
En float:left ou en display:inline-block, c'est plus prévisible.

En effet, le problème venait du fait que je plaçais le bord sur le lien au lieu de l'appliquer en bord de l'élément <li>.

J'ai aussi utilisé display:inline-block, et là tout est parfait !

Merci beaucoup Florent V. pour ton aide.