[RESOLU] Z-index et IE

Bonjour,

Souci avec IE 6... Mais tout se passe bien avec IE7 et Firefox 2.0...
Malheureusement, bon nombre d'internautes ont encore la version 6 d'IE donc il s'agit d'être accessible par le plus grand nombre...

Explication du problème :
Lorsque je survole un titre du menu, les sous menus s'affichent (très bien), mais je ne peux pas survoler les titres des sous-menus qui disparaissent.
J'ai essayé différents z-index ... en vain.

Code CSS du menu

 /*Feuille de style specifique au menu horizontal : trouvé sur  http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal*/
 

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
	}
	
#menu {
position: absolute; 
width : 800px;
display: block;
top: 170px;
left: 0px;
z-index: 100; 
margin: 0;
padding: 0;
	}

#menu dl {   
float: left;
width: 16.66%;
color:gray;
background:coral;
	}

#menu dt {    
text-align: center;
vertical-align: middle;
font-weight: bold;
margin: 1px;
padding-top: 8px;
height: 3em;
border: 1px solid #C0C0C0;
background:#FFFFCC ;
	}

#menu dd { 
display: none;
border: 1px solid #D4D4D4;
	}
	
#menu li { 
text-align: left;
padding-left: 5px;
padding-bottom: 5px;
display: block; 
	}
	
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
	}
		
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background:#FFFFCC;
	}

 Code CSS du reste des éléments 

BODY {
	padding-right: 0px; 
	padding-left: 0px; 
	padding-top: 0px; 
	padding-bottom: 0px; 
	margin: 0px; 
	background-color: #E4E4E4;	
	font: 11px/15px Tahoma, Verdana, Arial, Helvetica, sans-serif; 	
	text-align: left;
	}

#principal {
	position: relative;
	background-color: #FFFFFF;
	border-top: #DADADA 6px solid;
	border-right: #DADADA 6px solid; 
	border-left: #D4D4D4 6px solid;
	border-bottom: #DADADA 6px solid; 
	padding-right: 1px; 
	padding-left: 1px; 
	margin: 20px auto; 
	width: 800px;
	padding-top: 1px; 
	}
#header {
	padding-right: 0px; 
	padding-left: 0px; 
	padding-bottom: 0px; 
	padding-top: 0px; 
	margin: 0px auto;
	background-color: #FFFFFF;	
	width: 100%; 	
	height: 150px;
	}
	
#header_infos { /*  Défilement des outils du GIP*/ 
	width: 800px;
 	height: 20px;
	}
#ContentLeft {	
	float: left;
	width: 210px;
	margin-top: 70px;
	padding-right: 8px;
	padding-bottom: 2px;	
	border-right: 1px solid #CCCCCC;
	}
	
#contentRight {
	position: relative;
	z-index: 1;
	float : right;	
	width: 550px;
	margin-top: 70px;
	margin-right:0px;
	padding-top: 8px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 48px;	
	font-size: 100%;
	text-align: justify;	
		}
	
#pied {  	
	clear: both;
	position: relative;
	margin-top:0;
	padding:0;
	padding-top: 10px;
	padding-bottom: 20px;
	border-top: 1px solid #CCCCCC;
	font-size: 100%;
	background: #E8E8E8;
	text-align: center;	
	}

Voir le site :


Merci de tout éclairage.
Modifié par gaelle (09 Oct 2007 - 14:09)

Bonjour Gaelle,

Dans ta css:

#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
	}

Essaies d'enlever la ligne:

height: 100%;

bonjour,

Désolée pour tous ces jours sans réponse...

Et merci de cette réponse qui colle parfaitement bien.

Bonne journée.