[CSS] Liste horizontale, différences IE / Firefox

18 avr. 2006, 12:51

Bonjour,

J'essaye en vain d'avoir une liste horizontale (un menu en fait) compatible IE et Firefox.
Les particularités de ce menu sont un alignement à droite sauf le premier élément aligné à gauche.
Sous Firefox, pas de problème, ça fonctionne.
Par contre sous IE, il m'a tout détruit sans pitié et sans que je comprenne d'où viennent les problèmes et comment les régler (j'ai l'impression qu'il a déjà du mal avec l'alignement à droite).

Afin de ne pas baisser les bras et retomber sur une solution à base de tableau après m'avoir arraché la totalité des cheveux, je solicite votre aide (je tiens à mes cheveux après tout).

Merci d'avance.

Le code html du menu :

Code : Tout sélectionner

<div id="links">
   <ul id="navlist">
      <li class="left"><a href="#">Item Left</a></li>
      <li><a href="#">Item Right 1</a></li>
      <li><a href="#">Item Right 2</a></li>
      <li><a href="#">Item Right 3</a></li>
   </ul>
</div>

Le CSS correspondant :

Code : Tout sélectionner

div#links {
   display:block;
   width:100%;
   background-color:#cdb3ff;
   padding-right:15px;
   margin-left:-15px;
   margin-bottom:1em;
   height:1em;
   text-align:right;
}

ul#navlist li.left {
   text-align:left;
   display:block;
   float:left;
}

#navlist li {
   display: inline;
   margin-left:10px;
   list-style-type: none;
}

#navlist a { padding: 3px 15px; }

#navlist a:link, #navlist a:visited {
   color: #6700cd;
   background-color: #a296ff;
   text-decoration: none;
   font-weight:bold;
}

#navlist a:hover {
   color: #6700cd;
   background-color: #b096ff;
   text-decoration: none;
   border-top:1px solid #6700cd;
   border-bottom:1px solid #6700cd;
}

18 avr. 2006, 12:58

essaye le display: block pour tes #navlist li
et je pense pas que le div autour du block ul soit nécessaire

18 avr. 2006, 15:21

Joli, effectivement en plaçant un display:block et un float:right, on tombe sur quelque chose de plus semblable (et compatible IE/FF).

Maintenant le problème principal vient des liens sous IE.
#navlist a { padding: 3px 15px; }
n'a aucun effet sous IE.

En cherchant un peu, j'ai trouvé la solution qui consistait à faire passer les liens en block (un lien doit être un block par défaut sous FF je suppose).

#navlist a {
display:block;
padding: 3px 15px;
}

html>body #navlist a {
margin-top:-5px;
}

La deuxième règle sert à faire remonter les liens sous FF.

Dernier petit détail : sous firefox, les liens sont plus hauts que le div conteneur, ce qui fait qu'on a une bande de couleur avec par dessus les liens qui sont presque 2 fois plus haut.
Par contre sous IE, les liens prennent la même haute que le conteneur.
Une solution pour avoir le même effet que sous FF ?
J'ai essayé de mettre un padding négatif sur le conteneur mais ça ne change rien...

18 avr. 2006, 19:30

jai pas trop regardé, mais il me semble qu'en définissant explicitement un height de même valeur dans les deux blocs et en prenant soins d'avoir les padding et margin top et bottom à 0, ça devrait fonctionner, non?

18 avr. 2006, 22:32

Ben justement non, je veux que ça fasse l'effet inverse, à savoir que le conteneur soit moins haut que le contenant.
Sous Firefox ça ne pose pas de problème, il n'agrandit pas le conteneur. Par contre sous IE il agrandit tout seul le conteneur pour que le contenant ne dépasse pas, ce qui est moins joli...

[CSS] Liste horizontale, différences IE / Firefox

Qui est en ligne