[Résolu]Décalage sur un hover (fusion marges IE 6)

Bonjour à tous,

J'ai créé un menu simple (à cette adresse), avec <ul> et <li>, qui lorsque que je passe sur le second carré sur IE 6 (exclusivement) me colle le premier cadre ainsi que le second. Il semblerait que le problème ni soit plus lorsque je ne met pas de background-color, ou lorsque je ne met pas de background-position.

Vous remarquerez en regardant le code (j'ai tout centralisé sur une page rapidement donc pas de doctype etc...) que je donne la même apparence au menu de lvl1 ainsi qu'à celui de lvl2, et c'est normal, car je récupère ces menus d'un autre système et mon seul moyen de le récupérer est de faire comme ça.

Merci d'avance pour toute l'aide que vous pourrez m'apporter !

EDIT : J'ai remis le DOCTYPE qui (je l'avais oublié) change la manière d'interpréter les CSS du navigateur)
Modifié par Aerandir (21 Feb 2008 - 14:14)

Bonjour

Je viens de jeter un oeil à ton code et il me semble que le problème rencontré s'apparente à une fusion des marges intempestive de IE.

Ceci dit, je trouve ton code un peu complexe pour ce que tu veux faire :
pourquoi englobes-tu ton menu dans une liste <ul class="CMS_lvl1"> à un seul élément de liste ?

Ne serait-il pas possible de modifier ton code html comme ceci :

<ul>
  <li><a href="#">Lien 1</a></li>
  <li><a href="#">Lien 2</a>
    <ul>
      <li><a href="#">Lien 2.1</a></li>
      <li><a href="#">Lien 2.2</a></li>
      <li><a href="#">Lien 2.3</a></li>
    </ul>
  </li>
  <li><a href="#">Lien 3</a>
    <ul>
      <li><a href="#">Lien 3.1</a></li>
      <li><a href="#">Lien 3.2</a></li>
    </ul>
  </li>
  <li><a href="#">Lien 4</a>
    <ul>
      <li><a href="#">Lien 4.1</a></li>
      <li><a href="#">Lien 4.2</a></li>
      <li><a href="#">Lien 4.3</a></li>
    </ul>
  </li>
  <li><a href="#">Lien 5</a></li>
  <li><a href="#">Lien 6</a></li>
</ul>

Il ne te reste ensuite plus qu'à utiliser les propriétés héritées pour arriver simplement à tes fins...

Le code CSS donnerait quelque chose comme ceci :

			#menu {
				width :	190px;
				margin : 0;
				padding : 0 0 10px 0;
				background : white;
			}
			
			#menu ul {
				padding : 0;
				margin : 0;
			}

			#menu li {
			  margin : 0 0 5px 0;
			  padding : 0;
				list-style : none;
				border : 1px solid #2B4E06;
				background-color : #487816;
			}

			#menu li a {
			  display : block;
 				width :	168px;
			  padding-left : 20px;
				color : white;
				font-weight : bold;
				text-decoration : none;
				background : transparent url(puce_menu_hover.gif) no-repeat 5px 6px;
			}

			#menu li #current, #menu li a:hover, #menu li a:focus, #menu li a:active {
				background-color : #7FA15C;
			}
			
			#menu li li {
			  margin-bottom : 0;
			  font-size : 0.8em;
				border : 0 none;
				background-color : #487816;
			}

			#menu li li a {
 				width :	148px;
			  padding : 3px 0 3px 40px;
				border : 0 none;
				background-color : #487816;
				background-image : none;
			}

Merci beaucoup, ça marche parfaitement.

Pour ce qui est de changer le code HTML, je suis vraiment bloqué le système que j'utilise lit une arborescence de page, et je n'ai malheureusement pas la possibilité de trop modifié le code du menu, le CMS_lvl1 étant la racine du menu !

En tout cas, je commençais à m'arracher les cheveux, et je suis heureux que la solution soit si simple ! Je ne connaissais pas du tout ce bug sous IE 6, et je suis d'en avoir appris un nouveau.

Merci encore pour tout, la réponse rapide et claire. Merci ! Merci !