Z-index sous IE7 (et IE6 ?)

Bonjour,

J'ai créé une page avec un tas de calques en position absolue. Le code est actuellement très brute et très difficile à lire (je parle du CSS, des centaines de ligne pour aligner ces quelques calques correctement, et je n'ai pas encore commenté le code), car je vais tout recoder en PHP plus tard. J'ai donc mis ça online pour que vous voyez la différence. J'aimerais également que vous me disiez si ça fonctionne sous IE6.

http://ixzed.free.fr/dnLL/

En fait, quand on regarde avec Mozilla, tout est parfait. Les onglets sont situés par-dessus les descriptions. Même chose sous Opéra. Mais sous IE7, les onglets sont en-dessous des descriptions et le message de bienvenue est au-dessus des descriptions. Le but est bien entendu que ce message disparaisse lorsque l'on passe la souris sur l'un des liens.

Mes propriétés sont certainement correctes, si ça marche sous tous les navigateurs sauf IE, on sait d'où vient le problème. Je veux donc savoir si ce problème est également présent sur IE6 et éventuellement comment le palier. Disons que j'ai dû "gosser" des dizaines d'heures pour arriver au résultat où j'en suis, quelque chose qui fonctionne avec tous les navigateurs et qui se grossit correctement avec les options des différents navigateurs (débordement sous Mozilla, mais c'est inévitable de toute façon).

Merci d'avance,
dnLL
Modifié par D@n!eL_ (01 Jul 2006 - 06:41)

Bonjour,
Ca n'a pas l'air de marcher sous IE6, du moins sur ma machine (XP etc.). Plus concrètement, le passage de curseur ne provoque aucun effet, aucune image (contrairement à Firefox). Je crois qu'il te faudra insérer des conditions du style <if IE6...> et <endif> dans le code. L'adresse suivante donne quelques exemples qui ressemblent à ce que tu fais, avec les fichiers css, en guise d'illustration: http://www.cssplay.co.uk/menus/index.html
Bon courage.

Explosons joyeusement les mythes du web : les « calques » n'existent pas en HTML/CSS. Cf Quelle est la différence entre un DIV et un "calque".

D'ailleurs, si je puis me permettre une petite citation :

a écrit :
Sus à cette infâmie de langage ! Un calque n'est pas un DIV et un DIV n'est pas un calque !

Saluons la naissance du "CCC" (Comité Contre les Calques") et évitons de parler de "calques" dans les forums ! (sauf sur les forums Dreamweaver ou les vieux forums obsolètes de webmasters des années 90).

Une loi sera bientôt votée sur le Forum Alsacréations : tout contrevenant qui prononce de manière délibérée le mot "Calque" sur ce forum se verra châtié jusqu'à son repentir.

Source : Comité contre les calques.

Bon, désolé d'avoir parler de calques. Je vais parler de conteneurs en position absolue alors, bien que je trouve l'expression un peu plus longue à écrire. C'est comme parler d'un non-voyant au lieu d'un aveugle.

Merc sigma, je sais que je vais devoir utiliser un tas de conditions pour IE... Encore des heures de débuggage sans doute ! Je connaissais The CSS Playground. Je vais regarder si je peux trouver quelque chose de semblable à mon affaire, je pense entre autres à leurs galeries d'images avec descriptions qui illustrent bien le principe de faire afficher une image et un texte à quelque part lorsque l'on passe le curseur sur une miniature.

Sinon, comment vais-je palier tous ces problèmes ?

Selon ma logique, tout est programmé pour fonctionner, mais tout ne fonctionne pas... C'est souvent ça avec IE d'ailleurs. Le problème du z-index, je n'y vois pas d'alternative. Et, en plus, tu me dis que sous IE6 rien ne change au passage du curseur sur le lien. C'est assez bizarre... je vais devoir réinstaller IE6 dans un dossier différent d'IE7, c'est sûr.

Merci déjà,
D@n!eL_
Modifié par D@n!eL_ (01 Jul 2006 - 16:24)

Juste en passant, mpop, j'ai lu l'article, et il est écrit à la fin qu'il faut parler de calques lorsque l'on utilise la propriété z-index. Mais bon... c'est un peu théorique tout ça, l'important était que les gens comprennent.

Dernière suggestion, pas très technique: en constatant que le z-index ne produisait pas toujour l'effet désiré, j'avais essayé, dans un site dont je m'occupe, tout simplement de mettre les parties qui doivent apparaître par-dessus en premier au niveau du code html même... et ça a marché. Voici l'adresse du site.
Bon courage.

Je l'avais oublié celle-là... mais malheureusement, ça ne fonctionne pas. Je vais devoir jouer un peu avec tout ça.