[Résolu] Position absolute passe sous un bloc en relative - ie6 et 7

Bonjour à tous,

Voilà deux jours que j'écume Google à la recherche d'une solution concernant un bug d'affichage sous IE6 et 7 et malgré un grand nombre d'articles très intéressants sur les problématiques de bug de position d'IE, je n'ai pas trouvé la solution à mon problème.

J'ai un menu horizontal dont la liste de liens (sous-menu) est affichée en position absolute (effet très classique et avec lequel je n'avais jusqu'ici jamais rencontré de pépin) et survole le reste des éléments de la page. Mais sous IE6 et 7, le sous-menu passe sous le bloc de contenu central de ma page...

<div id="mainMenu">
            	<div class="menuContainer">
                    <ul>
                        <li>
                        	<a href="#" class="firstMenuLink">Titre de mon item de menu</a>
                                <ul class="sousNav">
                            	  <li><a href="#">Sous-menu 1</a></li>
                            	  <li><a href="#">Sous-menu 2</a></li>
                            	  <li><a href="#">Sous-menu 3</a></li> ... etc.
                            </ul>
                        </li>
                        <li>
                        	<a href="#">Item de menu 2</a>
                                <ul class="sousNav">
                            	  <li><a href="#">Sous-menu 1</a></li>

... etc.

Le style du sous-menu :

#mainMenu li ul.sousNav {
	position: absolute;
	z-index: 200;
	top: 23px;
	left: 0;
	background-color: White;
	width: 100%;
}

Le contenu principal de ma page et l'élément qui pose problème :

<div id="mainContent">
        
            <!-- Liste des thématiques -->
            <ul class="thematiques">
                <li class="categ1"><a href="#">Categ 1</a></li>
                <li class="categ2"><a href="#">Categ 2</a></li>
                <li class="categ3"><a href="#">Categ 3t</a></li>
            </ul>
            <!-- /thematiques -->

CSS :

#mainContent {
	float: left;
	padding-left: 8px;
	border-left: 2px dotted #C6C5C6;
}
.thematiques {
	min-height: 265px;
	width: 557px;
	background: url(../images/image_centrale.jpg) no-repeat left top;
	position: relative;
}
.thematiques li {
	position: absolute;
}

J'ai besoin que mon conteneur "thematiques" soit positionné car le graphiste s'est lâché sur des effets et je suis obligé de placer mes categs en absolute pour les disposer au pixel près sur une image de fond. Sauf que cette position relative empêche le menu de passer au dessus (si j'enlève la position du conteneur, le menu passe nickel).

Si quelqu'un a une idée , merci d'avance !
Modifié par Jordi (04 Mar 2011 - 14:45)

Salut,

Un positionnement et des z-index appropriés sur #mainMenu et #mainContent pourraient régler le problème, plutôt que sur .sousNav et .thematiques.

Malheureusement le positionnement relatif sur #mainMenu et #mainContent ne change rien. Je ne peux pas les mettre en absolute pour des questions de structure du reste de la page.

J'ai lu sur un forum que les z_index ne fonctionnent que sur des éléments de même niveau dans le DOM, ce qui aurait pu expliquer mon bug. J'ai donc essayé d'enfouir mon bloc "thematiques" sous une quantité de div pour le faire descendre dans l'arbre du DOM, sans résultat... j'ai peut-être mal compris. Pourtant, si je remonte ma sousNav dans l'arbre, là elle passe bien au dessus du contenu... il y a donc probablement un problème de z-index quelque-part

Merci pour ta suggestion
Modifié par Jordi (02 Mar 2011 - 12:06)

Jordi a écrit :
Malheureusement le positionnement relatif sur #mainMenu et #mainContent ne change rien. Je ne peux pas les mettre en absolute pour des questions de structure du reste de la page.

J'ai déjà été confronté à ce type de problème, c'est comme ça que je l'ai résolu. Ceci dit, tu as sans doute des contraintes que je ne connais pas.
Quand à mettre ce type de bloc en position absolute, effectivement ce n'est pas terrible, sauf si on a un site statique dont on sait que le contenu restera figé.
Modifié par Ericf (02 Mar 2011 - 12:32)

Bonjour,

Difficile de se faire une idée sans exemple en ligne.
Mais à priori ça pu le

zoom:1;

Donc peut-être un petit

#mainMenu li ul.sousNav {zoom:1;}

J'ai testé les zoom:1, les overflow... tout ce que j'ai l'habitude d'utiliser pour parer aux bugs d'affichage d'IE mais ce problème est vraiment résistant ! Je crains d'être obligé de tout faire sous forme d'une image-map et au diable la maintenance

Je ne peux pas donner d'exemple en ligne, mais merci de votre soutien

Hello,

J'ai eu le problème il y a peu de temps sur un projet fort sympathique.
La solution trouvée était le retrait du positionnement (qu'il soit absolu ou relatif) sur le ul parent (le premier dans ta structure de listes imbriquées).
C'est clair que ça va certainement beaucoup t'ennuyer pour positionner tes éléments ensuite, mais j'ai pu jouer avec des marges de mon côté.

Dans un premier temps donc :
- vérifier que le plus grand parent de ton sous-menu soit positionné (relatif ou absolu) et possède un z-index plus grand que celui de ton contenu principal (lui même positionné)
- retirer le positionnement (quel qu'il soit) sur le ul de ton menu (pas du sous-menu, du menu)
- voir ce que ça donne

IE n'arrêtera jamais de nous surprendre

Hélas tu as bien raison Riku : je me suis finalement rangé à ta solution la mort dans l'âme ! A moi la joie des triples feuilles de style et des positionnements à la mano