28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Je viens de créer un menu en css et j'ai un problème d'affichage entre IE7 et Firefox.
Entre chaque <li> dans IE l'espace est plus grand que dans Firefox.
J'ai cherché et essayé de trouver une solution mais rien à faire pour que mon menu s'affiche dans IE comme dans Firefox.
Quelqu'un pourrait-il m'aider ?
Voici le lien pour voir le menu : http://www.turtlefree.com/festival/index.php

Merci par avance

Ci-dessous le css du menu :
/* NAVIGATION */

ul.nav{
top:50px;
left:0;
color:#fff;
font-size:.8em;
position:absolute;
z-index:30;
width:100%;
}

ul.nav li{
margin:0 0 2px 0;
}

ul.nav li a:link, ul.nav li a:visited, ul.nav li a:hover, ul.nav li a:active{
margin:0;
padding:2px 0 2px 0;
color:#fff;
text-decoration:none;
display:block;
width:100%;
line-height:10px;
}

ul.nav li a.onglet1{
background:transparent url(../images/deco/bg_onglet1.gif) no-repeat;
}

ul.nav li a.onglet2{
background:transparent url(../images/deco/bg_onglet2.gif) no-repeat;
}

ul.nav li a.onglet3{
background:transparent url(../images/deco/bg_onglet3.gif) no-repeat;
}

ul.nav li a.onglet4{
background:transparent url(../images/deco/bg_onglet4.gif) no-repeat;
}

ul.nav li a.onglet5{
background:transparent url(../images/deco/bg_onglet5.gif) no-repeat;
}

ul.nav li a.onglet6{
background:transparent url(../images/deco/bg_onglet6.gif) no-repeat;
}

ul.nav li a.onglet7{
background:transparent url(../images/deco/bg_onglet7.gif) no-repeat;
}

ul.nav li a.onglet8{
background:transparent url(../images/deco/bg_onglet8.gif) no-repeat;
}

ul.nav li a.onglet9{
background:transparent url(../images/deco/bg_onglet9.gif) no-repeat;
}

ul.nav li a.onglet10{
background:transparent url(../images/deco/bg_onglet10.gif) no-repeat;
}

ul.nav li a.onglet11{
background:transparent url(../images/deco/bg_onglet11.gif) no-repeat;
}

ul.nav li a.onglet12{
background:transparent url(../images/deco/bg_onglet12.gif) no-repeat;
}

ul.nav li a:hover{
color:#ad556b;
background:transparent url(../images/deco/bg_menu.gif) repeat-x center;
}
Hmmm, je me trompe peut-être mais...
Peux-tu essayer de ne pas passer à la ligne entre les <li> ?

Actuellement :

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>


A tester en :

<ul><li>...</li><li>...</li><li>...</li></ul>


Normalement, les sauts de lignes n'interviennent pas à l'affichage, Mais il existe quelques exceptions assez étranges...
Modifié par Nigel (05 Jul 2009 - 17:53)
Nigel merci pour ta contribution.
Je viens d'essayer mais comme je m'y attendais cela n'a rien changé.

En fait ce n'est pas la première fois que je rencontre ce problème avec des menus verticaux et je n'ai jamais su d'où cela pouvait bien venir.

J'ai vraiment du mal à comprendre ce phénomène.
bonjour,

tu est face a un defaut de haslayout , pour l'activer : un zoom:1; ou une largeur , ou un float + largeur sur li , ou une hauteur ... sur li .
IE7 et inf sont concernés.

++
J'ai moi aussi tenté en priorité d'ajouter le HasLayout aux <li> via la IE developper toolbar, étant donné que les <li> n'en sont effectivement pas pourvus. Malheureusement... Ca ne semble pas résoudre son souci.
C'est pourquoi j'ai pensé aux sauts de ligne dans le code HTML.

Turtlefree, essaie une chose : combine donc à la fois un zoom:1 sur les <li> ET le défaut de saut de ligne.
J'avoue que quelque chose m'échappe là...
Modifié par Nigel (05 Jul 2009 - 18:23)
J'ai essayé vos options mais rien ne semble vouloir changer.
Le jour où ie interprètera correctement le code... Je serai peut-être à la retraite !!!

Merci à vous tout de même
En attendant de trouver une solution, tu peux déjà éventuellement annuler la marge de 2pixels des <li>, pour IE6 au moyen des commentaires conditionnels.
Mais bon, ce n'est pas non plus comme si cette différence était grâvissime, si ? Smiley smile
Merci pour les infos.
Je pense que comme tu le soulignes Nigel cette différence n'est pas gravissime. De plus comme je n'ai plus beaucoup de temps pour rendre ce travail je vais laisser comme ça.
Par contre je me replongerai sur ce problème ultérieurement car je voudrai bien trouver une solution qui me servira dans d'autres projets.