Discussion :

[gael]

bonjour,

sur la page :http://www.objectifzen.fr/Default.as...signCode=26384, le menu déroulant s'affiche en dessous du cadre principal, j'ai essayé de mettre des z-index supérieurs pour le menus un peu partout où je pouvais mais il s'affiche toujours en dessous, pvez vous m'aider?

[Jihess]

Bonjour, moi j'ai le même problème : un menu vertical avec déroulé sur la droite. Sur Firefox nikel mais sur IE, le menu déroulant passe SOUS la div de droite. J'ai mis les z-index, mais cela ne marche pas sur IE visiblement. J'ai positionné de la même façon mon menu et ma div pour voir (tous 2 en absolu, tous 2 en relatif), mais cela ne change pas

http://www.costarica-nature.org/FRAN...infos-fixe.htm
un extrait du code (feuille CSS alternative pour IE 7 et sup.)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.content {
position: relative; /* essayé avec absolute et des valeurs-c'est pareil*/
height: 100%;
overflow: auto;
z-index:1; /* je l'ai mis sur .boite mais c'est pareil*/
}
.boite {
position: relative;
width:98%;
}
.menu2 ul li ul{
display: none;
}
.menu2 ul li:hover ul{ /* j'ai mis li a:hover et rien ne change*/
position: absolute;
top: 0;
left: 170px;
display:none;
z-index:10;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="menu2"> 
  <ul id="menu-vert">
    <li class="planche3"><a href="#">Informations </a> 
       <ul>
        <li class="planche-sousmenu"><a href="#">Informations pratiques</a></li>
        <li class="planche-sousmenu"><a href="#">Météo, climat</a></li>
        <li class="planche-sousmenu"><a href="#">Savez-vous que ?</a></li>
      </ul>
   </li>
 </ul>
</div>
<div class="content"> <!-- contenu de la page -->
  <div class="boite">

La suite du code CSS est dans le fichier joint.
Dans IE 6 il ne se passe rien, et avec IE 7 le menu passe sous la div de droite...
Quelqu'un a-t-il une idée ? merci beaucoup pour votre aide

[Erwan31]

Bonjour,
cela vient d'une spécificité du moteur de rendu d'IE en présence d'un positionnement relatif: IE dessine les éléments les un après les autres en superposant les derniers dans le flux sur les précédents, alors que les autres navigateurs font l'inverse.
Solution:
> supprimer le position:relative du LI qui sert de référent à l'UL positionné de manière absolu.
> Supprimer les propriété de positionnement de l'UL (top: 0; left: 170px) et les remplacer par des marges.

@gael. Il y a des chance pour qu'il s'agisse du même problème

[Jihess]

Bonjour,
Merci pour ton aide. J'ai essayé ce que tu proposes, dans toutes les combinaisons (du moins je pense !) mais hélas cela ne change pas. J'ai enlevé les "relative", puis je les ai remplacés par "absolute", avec ou sans marges...Le déroulé est toujours sous le bloc de droite de la page.
Par contre ça marche nikel sur IE en mettant un z-index: -1; pour le bloc page (.content). Par contre après je ne peux plus cliquer dessus ! Il doit penser que le menu, qui est au-dessus donc (z-index: 10), prend toute la page, et donc IE ne détecte pas ce qu'il y a en-dessous...
Pourtant j'ai spécifié la largeur du menu à 230px...
Une idée ??

[Erwan31]

Il ne faut pas remplacer le positionnement relatif par un positionnement absolue.
Eviter autant que possible d'utiliser la propriété position qui provoque certaines confusions...
Supprime tout tes position relative et absolue (excepté le sous menu) des grand blocs de ta page et met tous ça en ligne (tu n'as rien mis en ligne).

[Jihess]

Alors il y a du mieux : sous IE le sous-menu se déroule bien, mais quand je vais dessus, si je survol en-dessous du 1er lien, il disparait d'un coup !
Je vais sur le lien 1, ça marche, je descend pour aller sur les autres liens du sous-menu, et il disparait totalement. Comme s'il avait une hauteur égale à un lien de sous-menu...

Et cela se passe quand la souris est au-dessus du bloc de droite. Quand elle est entre le menu et ce bloc (il y a un petit écart), là tout marche parfaitement. Mais il faut bien viser et c'est pas du tout jouable ! Sur FF toujours nickel.

Je pense que le problème peut se régler sans toucher au HTML, mais uniquement au CSS, qu'en penses-tu ?
Merci beaucoup