[résolu mais mystère] ie et borders

Bonjour à tous

j'ai un menu de liens qui fonctionne parfaitement sous les navigateurs corrects.
seulement sous ie, au rollover, les liens se décalent légèrement.
je ne parvient pas à concevoir un hack ie qui fonctionne.
le box model hack) fonctionnant pour une largeur (ou hauteur) fixe, et non pas relative à la hauteur du lien.

Quelqu'un aurait-il une solution ?
Merci beaucoup

CSS:

#conteneur{
position:relative;
width:500px;
height:343px;
background: url(bkgrd.gif) top left no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
}
#conteneur p{
width:108px;
position:absolute;
float:left;
top:35px;
}
html>body #conteneur p{
top:27px;
}
#contenu1{
left:7px;
}
#contenu2{
left:131px;
}
#contenu3{
left:256px;
}
#contenu4{
left:380px;
}
#conteneur a{
display:block;
padding:2px;
margin-bottom:2px;
border: 1px solid #333367;
background-color:#e1f1fc;
text-decoration:none;
color:#333367;
width:100%;
}
#conteneur a:hover{
color:#fff;
background-color:#6593b5;
}
#conteneur p br{
height:2px;
}

html:

<div id="conteneur">
	<p id="contenu1">
		<a href="#">lien</a>
		<a href="#">lien lien lien lien</a>
		<a href="#">lien lien lien lienlien lien lien lien lien lien</a>
		<a href="#">lien</a>
		<a href="#">lien</a>
	</p>
	<p id="contenu2">
		<a href="#">lien lien lien</a>
		<a href="#">lien</a>
		<a href="#">lien lien lien lien lien lien</a>
		<a href="#">lien lien lien lien lien lien</a>
		<a href="#">lien lien lien lien</a>
		<a href="#">lien lien lien lien lien lien lien lien lien lien</a>
		<a href="#">lien lien lien lien lien</a>
	</p>
	<p id="contenu3">
		<a href="#">lien</a>
		<a href="#">lien lien lien lien</a>
		<a href="#">lien lien</a>
		<a href="#">lien lien lienlien lien lien lien lien lien lien</a>
		<a href="#">lien lien</a>
		<a href="#">lien</a>
		<a href="#">lien lien lien lien lien lien lien lien lien</a>
		<a href="#">lien lien lien lien</a>
	</p>
	<p id="contenu4">
		<a href="#">lien lien lien</a>
		<a href="#">lien</a>
		<a href="#">lien</a>
		<a href="#">lien lien lien</a>
		<a href="#">lien lien lien lien lien lien lien</a>
	</p>
</div>

Modifié par yyoupla (03 Nov 2005 - 11:50)

Bon hé bien j'ai trouvé...

le problème sous ie est qu'il interprète mal la position du block en fonction des marges.
en effet, j'avais spécifié une margin-bottom mais pas de margin-top.
Du coup, comme il est malin comme une poule (c'est très très bête une poule), il cale la position du block en se basant sur la margin-bottom.

Il faut donc également spécifier une margin-top, en bidouillant les 2 pour obtenir un résultat semblable à un navigateur standard.

#conteneur a{
display:block;
padding:2px;
margin-bottom:1px;
margin-top:2px;
border: 1px solid #333367;
background-color:#e1f1fc;
text-decoration:none;
color:#333367;
width:100%;
height:100%;
}

Et voilà, c'est fixé.

Maintenant, essayez en inversant les valeurs des marges : ca ne marche pas !
De même, pourquoi cela n'arrive qu'au rollover, je n'en ai pas la moindre idée...
Si quelqu'un peut m'expliquer je suis preneur