[résolu] Problème <li> ie6

Voilà, je vais expliquer un problème que je rencontre souvent et auquel je n'ai jamais trouvé de solution satisfaisante.

Lorsque j'utilise des balises <li> avec ie6, je n'arrive pas à règler l'interligne de façon corecte !

voici un lien vers la page problèmatique , la liste qui m'embête est celle des trois petits liens dans la barre menu du haut : "home" "partners" "book now"

voici le code qui la gere :
html

                   <div id="left-menu">
                       <ul>
                           <li><a href="#">Home</a></li>
                           <li><a href="#">Partners</a></li>
                           <li><a href="#">Book Now</a></li>
                       </ul>
                   </div>

css

#left-menu {
    width: 85px;
    position: absolute;
    top: 10px;
    text-align: center;
}

#left-menu li {
    line-height: 1em;
}

#left-menu a, #left-menu a:visited {
    display: block;
    font-family: book antiqua;
    text-decoration: none;
    color: #fff;
    border-bottom: solid 1px;
    border-color: #fff;
}



#left-menu a:hover {
    background: #fff;
    color: #003616;
}

Je pécise aussi que j'ai mis les marign et padding des ul à 0 un peu plus haut dans le code
Modifié par yahrou (04 Jan 2007 - 11:49)

Bonjour yahrou

Je n'arrive pas à accéder à la page que tu donnes en lien, l'adresse est-elle correcte ?

En général, j'essaie de ne pas toucher à la hauteur ou à l'interlignage sur les li, mais plutôt sur les liens qu'ils contiennent, ce qui m'évite généralement les espaces entre les li.

oui désozéle, j'ai corrigé le lien.

Je vais essayer de fare ce que tu dis...

j'ai réussi à corriger le problème en définissant une hauteur height pour le li de 1 em, et une line-height pour les liens...

Le rendu est tout de même différents sur firefox, ie7 et ie6 (sur firefox c'est un peu serré, sur ie7, c'est pas mal, sur ie6 c un peu ecarté)

Lorsque je ne mettais rien du tout, ca rendait très bien sur firefox et ie7, qqn sait d'où viennent ces espaces entre les li sur ie6 ?

L'explication (ou au moins, un début d'explication), se trouve à la fin de ce billet du blog.

Je suis contente d'avoir au moins compris d'où ça venait !
Pour régler le problème, j'ai appliqué un width: 100% à mes li, ce qui les "layout" sans pour autant rien changer à firefox (etant donné que c'était déjà des 100% par défaut).
Il y a toujours une différence d'affichage entre les 3 navigateurs, mais on va la considérer comme négligeable...
J'aurai pu aussi tout écrire à la suite, sans retour à la ligne, étant donné que je n'ai que trois liens, mais je n'aime pas ça !