[Résolu] Z-index, menu deroulant et IE

Bonjour,
J'ai suivi le (très bon) tutorial de création de menu déroulant (lien) pour produire la page suivante : jimpetit
sous Firefox, aucun problème, le résultat est le bon..
la ou ça se complique c'est avec IE.. les z-index semblent inopérants et les sous menus s'affichent en dessous des images (passer sur les images rondes).
J'ai repris la page du tutorial "menu css déroulant anarchique" en le complétant pour voir si le comportement etait identique. La aussi les sous-menus passent sous les menus dans IE. (exemple).
Avez vous des propositions pour ce problèmes .. (precision utile : je débute en CSS) merci d'avance.

Mathieu Petit
Modifié par gerard67 (10 Aug 2005 - 10:29)

bonjour,
voici une solution un peu sauvage, je reprends donc les z-index:

en debut de css indique:
* {position:static; z-index:100;} /* ça permet juste a IE de se situer */
puis par exemple un :
#menu1,#menu2,#menu3,#menu4 {
position: absolute;
width: 10em;
z-index: 2;
}
/* cette valeur par securité doit etre inferieur a 100 , c'est ici pour firefox, car nous allons ecrasez cette valeur dans les lignes suivantes et c'est a ce moment que ff la reprendra en compte comme prevu */

et pour chaque menu :
#menu1 {
top:100px;
left: 200px;z-index: 500;
}
#menu2 {
top:250px;
left: 100px; z-index: 500;
}
....

alors , je n'ai pas vraiment d'explication mais ça fonctionne, du moins sur ff et IE 6 chez moi.
ces z-index et position sont plutot capricieux et delicat a manipuler, le mieux c'est d'essayer de s'en passer pour un maximum de compatibilité ... mon avis.

a plus

edit: les modif sur le css du menu de base sont a faire sans changer l'ordre des choses.
Modifié par gcyrillus (10 Aug 2005 - 00:24)

Selon CSS2.1, chaque boîte positionnée crée son propre contexte d'empilement appliquable à ses descendants.

Autrement-dit, la superposition des sous-menus sous les menus dépend en fait du seul z-index attribué aux menus.

Dans l'exemple de Raphaël que tu cites, il suffit de faire :

#menu1 {
top:100px;
left: 200px;
[b]z-index: 4;[/b]
}
#menu2 {
top:250px;
left: 100px;
[b]z-index: 3;[/b]
}
#menu3 {
top:300px;
left: 300px;
[b]z-index: 2;[/b]
}
#menu4 {
top:250px;
left: 500px;
[b]z-index: 1;[/b]
}

merci beaucoup pour vos réponses ...
résolu en utilisant la methode expliquée par Laurent Denis et merci pour l'explication ; c'est deja plus clair.

Mathieu Petit