Je me retrouve à nouveau dans le merveilleux monde des CSS et des incompatibilités avec Internet Explorer. Mon objectif était d'afficher une liste d'éléments en utilisant des balises <ul>/<li>, et de placer des boutons à droite de chaque élément. J'ai donc ce code et le style CSS associé :
Source xHTML et CSS
<ul>
<li>
<a href="#">Button 3</a>
<a href="#">Button 2</a>
<a href="#">Button 1</a>
<p>Caption</p>
</li>
</ul>
ul
{
display : block;
padding : 0px;
margin : 0px 0px 8px 0px;
list-style : none;
}
ul li
{
padding : 0px;
margin : 0px;
border : 1px solid #C0D3E7;
font : normal normal normal 10px verdana;
}
ul li a
{
display : block;
float : right;
padding : 1px 4px;
margin : 2px 2px 2px 0px;
background : #DFE8EF;
border : 1px solid #C0D3E7;
color : #666699;
}
ul li p
{
padding : 2px 4px;
margin : 2px;
}Le rendu est correct sous Firefox, mais Internet Explorer 7 m'affiche le <p> sur une ligne en-dessous des trois liens pour une raison qui m'échappe. Ce qui m'échappe encore plus, c'est qu'en faisant exactement la même chose avec une <div> au lieu des <ul><li>, ça fonctionne très bien sous Internet Explorer. Voilà une illustration de ce que ça donne, en 1er la solution avec <div>, puis en deuxième celle avec <ul><li> :
- Rendu sous Firefox
- Rendu sous IE7
- Page illustrant les deux solutions
Autre chose, si je spécifie une taille pour l'élément <li> (par exemple 100%, ou 300px, peu importe) le rendu devient *presque* correct sous IE. J'ai juste une marge inférieure légèrement trop importante à l'intérieur de l'élément.
Vous êtes déjà tombé sur ce cas-là ? Pendant un moment j'avais espoir de finir par connaître les explications de tous ces comportements étranges, mais au fur et à mesure ça me semble de moins en moins réaliste comme objectif
Merci
