28172 sujets

CSS et mise en forme, CSS3

Superposition de div sous IE 7

Bonjour à tous Smiley smile !

J'ai un problème avec une superposition malencontreuse sous IE 7.

Mes div de sous menu s'affiche sous d'autre div présent dans ma page... Sous FF ca marche bien mais sous IE7 ils passe dessous... Alors j'ai mis des z-index sur mes div de sous menu qui sont associé à un position absolute et j'ai également mis un z-index inférieur à mes div présent dans ma page associé à un position relative. Mais ca ne marche pas. Voilà le code :

Feuille de style de base :

.submenu { position: absolute; z-index: 9; top: 42px; width:200px; background: #FFFFFF url("<%= IDP %>bl_fadeh_c1_b_20.png") bottom repeat-x;
 	border:1px solid #0F0F0F;
	border-top: 0; padding: 5px 5px 5px 5px;  text-align: left;
}


Feuille de style de surcharge ie7 :

.submenu { z-index:100; }
.block_1 { position:relative; z-index:2; } /* block étant malheureusement tjs au dessus de submenu... */
.block_2 { position:relative; z-index:3; } /* block étant malheureusement tjs au dessus de submenu... */


Code xhtml valid des div submenu s'affichant apres un clic sur une petite fleche comme pour "déplier" le menu :

<div id="pan_menu01" class="submenu" style="display:none;">
	<ul>
		<li style="margin:0">	
		... //des li et ul imbriqués
		</li>
	</ul>
</div>


Pour mieux comprendre vous pouvez aller voir le code du site ici:

http://www.jookees.com

Testez le dépliement du menu sous IE 7, le code est plus complexe que la situation exposé ici mais le problème est là.
A noter que si je passe les z-index en négatif (-2 et -3) sur block_1 et block_2 (les blocks étant tjs au dessus de submenu malheureusement) sa résout le pb... mais m'en créer un autre, le texte de block_1 et block_2 n'ai plus surlignable ni cliquable (!) malgré les tutos suivit pour régler ce pb (j'ai donné un height sur le body/html par exemple).

Merci a toute personne qui pourra m'aider sur ce pb qui commence a me prendre pas mal de soirées Smiley confus
Modifié par KurL (15 Jul 2008 - 21:01)
Administrateur
Bonjour,

voici un cas complet de ce que tu décris (enfin je crois?):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>test z-index forum.alsacreations.com/topic-4-35940-1-Superposition-de-div-sous-IE-7.html</title>
	<style type="text/css" media="screen">
#le1 {
	position: relative;
	background-color: red;
	/* Si z-index: 5; est absent, même bug que toi sous IE7. Avec l'instruction, cela corrige le problème */
	z-index: 5;
}

#le1 li.zindex {
	background-color: lime;
	position: absolute;
	left: 10px;
	top: 0;
	z-index: 9;
}
#le1 li {
	background-color: lightgreen;
	position: absolute;
	left: 10px;
	top: 1.5em;
}

#le2 {
	position: relative;
	z-index: 3;
	width: 400px;
	background-color: lightblue;
	margin-left: 40px;
}
	</style>

</head>
<body>
<div id="le1">
	<ul>
		<li class="zindex">9_Lorem ipsum dolor sit amet</li>
		<li>ipsum dolor sit amet, consectetuer</li>
	</ul>
</div>
<div id="le2">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Donec leo arcu, iaculis at, ultricies et, porta eget, urna.
 Nulla facilisi. Praesent ac risus at nulla fermentum condimentum.
 Integer odio massa, vulputate id, suscipit non,
 mattis sed, nibh. Suspendisse 
3_sollicitudin egestas nunc. Proin non risus.</p>
</div>
</body>
</html>


C'est l'ajout de l'instruction z-index: 5; qui change tout pour IE6 et IE7, voir commentaire.

Le point de FAQ: Comment fonctionne la propriété CSS z-index? a un lien vers un article du Mozilla Developer Center ultra-complet.
Je pense que tu es dans le cas où tu peux mettre un z-index de 1000 sur un descendant de #le1 sans que ça n'ait d'effet sur sa visibilité par rapport à #le2 parce que #le1 a un z-index plus faible que #le2 ... Voir "Empilement de couches" et les exemples dans l'article.
ATTENTION: opacity, même à 0.999 a une influence radicale. J'ai pas creusé la situation sur ton site parce qu'il est tard et que tu as une impressionnante cascade de règles CSS sur certains éléments Smiley rolleyes mais c'est peut-être pour ça que ça fonctionne sur Fx (ou pas).
Modifié par Felipe (15 Jul 2008 - 23:27)
Merci pour ton aide Felipe !

J'ai vraiment fait pas mal de truc là, j'ai supprimer des class css inutiles dans mon menu (dsl c'est pas encore en ligne), et j'ai testé pleins de z-index positionnés partout (dans l'xhtml également) au niveau des div, des ul et des li ! Mais nan, rien. J'ai regardé avec la Toolbar IE pour IE7 et le z-index est de toute facon bien pris en compte (j'ai le haslayout actif aussi), les élements au-dessus de mon menu ont quant a eux bien un z-index inférieur (d'apres la toolbar ie donc on peut supposer que c'est celui réelment interprété par IE). J'ai pris mes div de sous-menu je les ai mis dans mon footer et maintenant c'est bon, il sont bien au dessus mais j'ai bien sur quelque style qui ont foiré en passant mes div du menu à dans mon footer... Malgré tout comme ils sont positionnés en absolue ils sont tjs au bon endroit, mais cette solution me plait vraiment pas... Avoir mes sous-menu dans le footer Smiley biggol ...

Note : j'ai eu cette idée de déplacer dans le footer en lisant les cours de mozilla dev center ou j'ai vu que l'autre html était tres important pour le positionnement apparement... Et visiblement plus important que des z-index positonné...

Note 2 : J'utilise nul part d'opacity donc j'espere pas que ca vienne de là. J'ai également désactivé mes JS mais ca vient pas d'eux.
Sujet clos
Aller à