28220 sujets

CSS et mise en forme, CSS3

Liste et CSS / différence d'affichage entre Firefox et IE réparable ?

Bonjour,

Je suis en ce moment sur un visuel qui propose un menu horizontal. En tant que pratiquant des standards, j'ai décidé d'utiliser les styles sur une liste afin de faire ce beau menu conforme. Les cases de ce menu doivent, de plus, être alignées sur l'image de la têtière.

http://www.webgazelle.net/sites/defiorganisation/

Le problème vient du fait que encore une fois IE m'énerve en faisant comme bon lui semble.

Si vous affichez cette page dans les 2 navigateurs, vous vous apercevrez qu'il y a un décalage à droite sous IE dans la liste.

Est ce qu'une âme charitable daignerai m'aider ??

Voici le code de la liste :

<ul id="menuHorizontal">
<li class="select"><a href="quisommes-nous.php">Qui sommes-nous ?</a></li>
<li ><a href="actualites.php">Actualit&#233;s</a></li>
<li ><a href="evenements.php">Ev&#232;nements</a></li>
<li ><a href="nospartenaires.php">Nos partenaires</a></li>
<li ><a href="contact.php">Contact</a></li>
<li style="width:164px;color:#7C7B71;">Mise &#224; jour : 01/06/2005</li>
</ul>


et les style associés :

/* menuHorizontal */
#menuHorizontal {
    right:0px;
    margin:0px;
    padding:0px;
}
#menuHorizontal ul {
    margin: 0px;
    padding: 0px;
    background:#A6A492;
}
#menuHorizontal li {
    float:left;
    font-size: 10px;
    list-style-type: none;
    text-align: center;
    width:118px;
    height:19px;
    background:#E5E1C4;
    border-width:0px;
    border-right-width:1px;
    border-style:solid;
    border-color:#A6A492;
    line-height:19px;
}
#menuHorizontal li a {
    font-size: 10px;
    display: block;
    color: #000000;
    font-weight:bold;
    height:19px;
    background:#C8C5AC;
    line-height:19px;
}
#menuHorizontal .select a  {
    color:#FFFFFF;
}
Salut

est ce que ceci corrige ton problème ?


/* menuHorizontal */
#menuHorizontal {
    margin: 0px;     
    padding:0px;
}
#menuHorizontal li {
    float:left;
    font-size: 10px;
    list-style-type: none;
    text-align: center;
    width:118px;
    height:19px;
    background:#C8C5AC;
    border-width:0px;
    border-right-width:1px;
    border-style:solid;
    border-color:#A6A492;
    line-height:19px;
}
#menuHorizontal li a {
    font-size: 10px;
    color: #000000;
    font-weight:bold;
    height:19px;
    background:#C8C5AC;
    line-height:19px;
}
#menuHorizontal .select a  {
    color:#FFFFFF;
}


Ca marche toujours sous FF et je n'ai pas de "live preview" sous IE (si quelqu'un en connaît d'ailleurs je suis preneur) mais tu peux en tout cas certainement virer, comme je l'ai fait, le passage suivant qui ne sert à rien.

#menuHorizontal ul {
margin: 0px;
padding: 0px;
background:#A6A492;
}


Outre cela j'ai aussi supprimé le display:block sur le a des li et changé une couleur pour garder le meme résultat visuel.
J'étais aussi parti dans la voie des display:inline pour les li, au lieu du float:left, en ajoutant du padding, mais dans ce cas évidemment la largeur de tes li variaient car dépendante du contenu (au moins dans cette voie là il reste la solution barbare de rajouter des espaces vides Smiley langue mais il y a doit surement y avoir une solution avec le float )

Bon courage
Le rendu est exactement le même qu'avec l'ancienne version..
Et puis j'y tiens au display:block, c'est justement ca qui fait l'intérêt d'un menu de cette forme.

Le problème c'est vraiment cette marge à droite que génére IE ...
Je ne sais pas, c'est vraiment "embêtant", pour rester poli, de voir que IE foire une chose pareille..

Si tu arrives à régler le problème, je l'espère pour toi, ca serait cool d'en faire part ici.
Sujet clos
Aller à