Menu, z-index et IE7 : bug connu mais aucune solution vue ne marche

Bonjour,

Je sais que c'est un bug très connu, et j'ai vu sur ce forum et ailleurs plein de pistes, que j'ai suivies sans succès : un des éléments de ma page passe par-dessus mon menu de navigation, alors que d'autres éléments restent bien au second plan.

Je n'ai pas l'impression que ce soit le code de mon menu qui pose pb, puisque je l'ai copié depuis une autre page web (un thème Wordpress, pour être exacte), qui marche bien dans mon IE7.

J'ai vu que, pour qu'un z-index soit pris en compte dans IE7, il faut que l'objet du dessous ait aussi un z-index, inférieur, pour que le navigateur puisse comparer : fait.
J'ai aussi vu qu'il fallait que les éléments soient positionnés : c'est le cas.
J'ai aussi vu qu'il fallait peut-être mettre le z-index supérieur sur le parent du menu, chez moi le #header, c'est fait.

Rien n'y change ! Avez-vous des pistes ?

Voici quelques bouts de code :
n.b. : le site concerné est en cours de construction et j'ai mis un .htaccess dessus le temps de finir la réalisation, vous pouvez y jeter un oeil en montrant patte blanche :
url : http://www.encre-sympathique.fr/aapo-test/
identifiant : webaapo
mot de passe : cavacoll

#access .menu-header,
div.menu {
	font-size: 13px;
	width: 990px;
}

#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}

#access ul ul {
	display: none;
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 220px;
	
}

#access ul ul ul {
	left:95%; /* décalage par rapport au menu-parent */
	top: 0;
	/*background:yellow; */
}

#access a {
	color: #ffffff;
	display: block;
	background:#990033;
	line-height:38px;
	text-decoration: none;
	font-size:0.9em;
	font-weight:700;
	padding: 0 10px;
	margin-right:10px;
}

#access .menu-header li,
div.menu li {
	float: left;
	position: relative;
	z-index: 99999;
}

#access .menu-header ul li,
div.menu ul li {
	background-image: url("images/separateur-menu.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: right bottom;
}

#access .menu-header ul ul li,
div.menu ul ul li {
	background-image: none;
	height:20px;
	font-size:12px;
}


#access ul ul li {
	min-width: 180px;
}


#access ul ul a, #access ul ul ul a {
	background: #990033;
	background-image:none;
	line-height: 1.2em;
	padding: 7px 10px;
	width: 210px;
	/* height: auto; */
	border-bottom:#cccc33 1px dotted;
}

#access li:hover > a,
#access ul ul :hover > a {
	background: #cccc33;
	color: #990033;
}

#access ul li:hover > ul {
	display: block;
}

#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
	background-image: url("images/puce-select-menu-fff.png");
	background-repeat:no-repeat;
	background-position:left center;
}

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #fff;
}

Pouvez-vous m'éclairer svp ?
Merci
Corinne M
Modifié par zerflog456 (28 Jan 2012 - 12:50)

Bonsoir, si tu veux bien, je vais essayer de te donner une piste mais en simplifiant ton code:

/* CSS Document */
#access {
z-index:10;
}
#access ul {
z-index:20;
}
#access ul li {
z-index:30;
}
#access ul li ul {
z-index:40;
}
#access ul li ul li {
z-index:50;
}
#access ul li ul li ul {
z-index:60;
}

Bonjour Marco,

Merci pour cette piste : j'ai essayé, mais ça n'a rien changé. Question : pourquoi suggérais-tu de monter les z-index progressivement comme ça ? Quelle différence avec l'idée de mettre le z-index du menu direct à une valeur élevée ?

Corinne

Bonjour,

Je vois que #header et #conteneur ont des z-index, mais ils ne sont pas positionnés (c'est-à-dire que la valeur de la propriété position pour ces éléments sera celle par défaut, "static"), donc ces z-index seront ignorés. Peut-être garder ces z-index, et déclarer un position:relative. (Si ça marche, penser à faire un peu de ménage en supprimant les z-index et éventuels position:relative destinés uniquement à activer le z-index sur les autres éléments de la page.)

Les éléments qui passent par dessus les sous-menus, ça ne seraient pas des animations Flash? Si oui, c'est un sujet à part, et là ça dépend à la fois de l'empilement en CSS qui doit être correct, mais aussi du mode d'insertion de l'animation Flash dans la page (wmode "transparent"), et dans certains cas de figure ça dépend aussi de la version de Flash, du navigateur et du système d'exploitation. Dans certains cas limite on ne peut pas y faire grand chose.

Bonjour,

Problème résolu : la div qui contenait le menu était positionnée en relative :j'ai enlevé cette directive, et tout a bien fonctionné.

merci suggestions !
Corinne

Je réponds tard à ta suggestion, fvsch, mais en fait, le bug étant revenu suite à une modif dans la CSS j'ai appliqué ton conseil de positionner les dive #header et #conteneur : bingo, problème résolu.

Merci !
Corinne