28172 sujets

CSS et mise en forme, CSS3

Z-index ne marche pas sous ie6 (je craque)

bonsoir,

je bute depuis plusieurs heures sur un bug ie6, ce n'était pas le seul sur lequel je bloquais mais il ne reste que celui là à régler et je serais enfin tranquille.

J'ai un menu déroulant vertical que j'ai construit, le problème c'est que le menu de second niveaux ne veut pas se superposer sur celui du premier niveau malgré le z-index. Sous FF c'est impec, sous ie6 ça foire.

voici mon code, si vous pouviez m'aider vous me soulageriez énormément:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
  </head>
<style type="text/css">
<!--
 
 
* {
	margin: 0;
	padding: 0;
}
div#menu {
	width: 100px;
}
div#menu ul {
	padding: 0;
	width: 100px;
	border: 1px solid green;
	margin: 0px;
	background: yellow url();
	position: absolute;
	z-index: 1;
}
 
div#menu ul li {
	position: relative;
	list-style: none;
}
div#menu ul ul {
	position: absolute;
	top: 0px;
	left: 10px;
	display: block;
	background: red url();
	z-index: 999;
	border: 1px solid black;
}
div#menu li a {
	text-decoration: none;
}
//-->  
  
</style>  
  <body>
    <div id="menu">
       <ul>
          <li><a href="">menu 1</a></li>
          <li><a href="">menu 2</a>
             <ul>
                <li><a href="">Sous menu 2.1</a></li>
                <li><a href="">Sous menu 2.2</a></li>
             </ul>
          </li>
          <li><a href="">menu 3</a></li>
          <li><a href="">menu 4</a></li>
          <li><a href="">menu 5</a></li>
       </ul>
    </div>
  </body>
</html>
Bonjour,

L'affichage dans IE6 semble correcte.

Le positionement en absolu de l'<ul> parent n'est pas necessaire.

GC
gc-nomade a écrit :
Bonjour,

L'affichage dans IE6 semble correcte.

Le positionement en absolu de l'&lt;ul&gt; parent n'est pas necessaire.

GC


Bonjour,

si vous regardez bien vous verrez que le 3ème <li> du premier niveau chevauche sur le 2ème <li> du second niveau.
re,
ah oui , effet normal chez IE.

Ne positionnez pas le li en position:relative mais le parent ul ou div . N'indiquez pas de coordonnées pour top.

Ou , donnez un z-index/ a chaque li en partant d'une valeur elevé pour la premiere dans le flux .

ex: 
...
<li class="li5"><a href="">menu 1</a></li> 
          <li class="li4"><a href="">menu 2</a> 
             <ul> 
                <li><a href="">Sous menu 2.1</a></li> 
                <li><a href="">Sous menu 2.2</a></li> 
             </ul> 
          </li> 
          <li class="li3"><a href="">menu 3</a></li> 
          <li class="li2"><a href="">menu 4</a></li> 
          <li class="li1"><a href="">menu 5</a></li> 
...



.li5 {z-index:5;}
.li4 {z-index:4;}
/* etc ... */

Chaque li positioner en relatif sont recaculée et afficher en avant plan à l'ecran (reflow) .IE6 place au dessus les derniers éléments , les autres navigateurs font l'opposé.

GC
Modifié par gc-nomade (16 Oct 2010 - 14:49)
Merci énormément pour votre aide !
La 1ère astuce fonctionne à merveille... Du coup je suis obligé de passer par un hack dans mon css.
Sujet clos
Aller à