[ RESOLU ] Z-index et IE6

Bonjour (après une longue absence),
La nouvelle présentation de http://dsofficial.free.fr/public/new_theme3/index.php se joue essentiellement sur les superpositions des conteneurs.

Tout s'affiche correctement sur tous les navigateurs sauf... (roulements de tambours)... IE6 !

Voici la structure de la page

La partie haute, en rouge et bleu (DIV1) contient le texte de présentation (HELLO!...) et la liste des trois images (UL1; LI1,2,3)
La partie basse, en gris (DIV2) contient le texte du bas réparti en trois colonnes.

Le DIV2 est affecté en z-index:2; le UL1 en z-index:3. Le DIV2 est décalé vers le haut (position relative) de façon à se glisser entre le DIV1 et la liste UL.

Sur IE6, la DIV2 passe au dessus de tout. Avant de venir poser ma question ici j'ai évidemment essayé tout ce qui pouvait l'être en regardant un peu partout ailleurs.

Puisque c'est la première fois qu'un problème IE6 m'est insolvable, faut-il changer la structure de la page ou y a-til une solution plus proche de la situation actuelle ?

Merci d'avance ))

Edit : un screenshot pour vous aider
[Modération: Image trop grande]http://img15.imageshack.us/img15/6002/screenshot18082010.jpg
Modifié par dew (19 Aug 2010 - 17:22)

Bonjour,

Je ne vois pas de z-index:1 à ton premier div (#top). Puis, l'utilisation de z-index nécessite de spécifier un positionnement aux éléments sur lesquels tu spécifies des z-index.

Donc, mettre un z-index à #top1, et insérer dans ta CSS :

#top,#noir {position:relative;}

Cela devrait sûrement aller mieux après ça

Bonne journée,
Nicolas

Re-salut, encore moi,

Un petit oubli que j'avais pas mis spécifier : tu devrais peut être mettre le premier div avec un z-index supérieur, en plus de spécifier des positionnements (en relatif dans ce cas) aux éléments possédant des z-index.

#top {z-index:2;}
#noir {z-index:1;}

Bonne journée,
Nicolas

Re,
J'avais effectivement essayé de mettre des positions relatives à tous les éléments affectés d'un z-index, mais cela ne changeait rien; et pour le fait de spécifier un z-index supérieur au premier DIV, j'avais déjà mis sur ma feuille conditionnelle (pour IE6) un z-index négatif (-1) à mon deuxième DIV, ce qui effectivement faisait un effet, mais qui ne correspondait pas à ce que j'attendais (le premier DIV se met alors au dessus et masque une partie du texte d'en bas).

Finalement j'ai trouvé une solution alternative qui s'affiche correctement sur tous les navigateurs y compris IE6, comme quoi rien n'est si insolvable ^^.
Une solution encore meilleure que ce que j'attendais car les DIV en largeur 100% ne se rétrécissent pas horriblement en résolution petite 800*600

Merci quand même.

PS. Désolé pour avoir nommé #noir la partie grise du site, en références aux anciennes couleurs d site
Modifié par darkstar2023 (19 Aug 2010 - 13:26)

Re,

Ah c'est bien si tu as trouvé une solution à ton problème. J'avais déjà remarqué effectivement qu'IE6 se comportait pas toujours bien avec les z-index (enfin il se comporte pas bien tout court, c'est bien connu !).

Si tu n'as plus de problèmes, n'oublies pas de mettre ton sujet en résolu .

Bonne journée,
Nicolas

P.S. : pour l'histoire de la couleur, peut être pourrais-tu renommer ton div par sa fonction et non par la couleur qu'il contient (exemple : #content au lieu de #noir), comme ça, si tu changes encore ton graphisme, tu seras tranquille à ce sujet.

Apparemment le z-index fonctionne bien à condition que les blocs soient imbriqués dans un même bloc parent. Si les div appartiennent à deux parents différents, les z-index des blocs enfants n'agissent pas entre eux car les blocs parents annulent l'effet et se superposent selon leur place dans le flux.

C'est un bug IE6 que j'ignorais jusqu'à présent.

Bonne journée.
Modifié par darkstar2023 (19 Aug 2010 - 21:04)