Menu js + menu déroulant en dessous avec IE sa bug

Bonjour, j'ai installé un menu JS horizontal sur mon site. Seulement (voir photo) sur la droite, j'ai une liste déroulante, quand le menu js se dépli aussi la liste bug, et passe par dessus, sous firefox je n'ai pas de probleme, c'est bien le menu en js qui est par dessus, ici, la liste se vois a travers le menu, et j'aimerais savoir si y'a une solution possible (avant que je mette le code js, ou le bout en question car j'en ai aucune idée) Je vous remercie

Bonjour Okin

C'est un comportement inévitable chez IE. Voir http://forum.alsacreations.com/topic.php?fid=1&tid=5521&s=z-index#p48459

Bonjour,
ce sujet a déjà été débattu longuement sur d'autres forums, ici aussi je pense.
En fait, c'est un bug d'IE (pour changer).
Le seul moyen est de cacher la liste déroulante avec style.display = "none"; et de la réafficher après avec style.display = "block"; .

QuentinC a écrit :

Le seul moyen est de cacher la liste déroulante avec style.display = "none"; et de la réafficher après avec style.display = "block"; .

C'est un petit peu plus compliqué que cela, Quentin

Okin a un élément <select> dans le contenu sur lequel se déroule son menu. Or, comme expliqué dans le lien ci-dessus, les élément <select> sont, pour le moteur de rendu d'IE, des éléments "fenêtrés", qui sont traités différemment des autres éléments, et qui seront en particulier toujours affichés "au-dessus" des éléments non fenêtrés positionnés (ici, les éléments de menus), quelques-soient les propriétés CSS utilisées (z-index en particulier).
Modifié par Laurent Denis (07 Aug 2005 - 11:46)

Ben oui, c'est ce que je disais : il faut la masquer quand le menu est affiché et la réafficher quand le menu doit être caché.

Si je comprends bien ta remarque, le select est dans le menu ?
Dans ce cas je ne comprends pas où il y a un problème. On affiche alors la zone en même temps que le menu et on la cache en même temps.

La meilleure solution c'est quand même d'éloigner les éléments de formulaire de tels menus (comme dit dans le lien que tu as mis, d'ailleurs). Mais bon c'est vrai, c'est facile à dire mais peut-être plus compliqué à faire.
Modifié par Olivier (07 Aug 2005 - 12:12)

Tiens, j'avais cru que ce forum acceptait ..du gras.. pour mettre en évidence... pourtant il y a bel et bien un bouton...

<edit modo="Olivier">C'est [b ] pas [B] (sans espace)</edit>
Modifié par Olivier (07 Aug 2005 - 12:12)

Ah, je n'avais pas saisi à quoi tu faisais allusion, pardon.

Masquer le <select> lorsque le menu se déroule a un défaut : la page ne sera pas obligatoirement affichée comme prévue dans tous les cas de figures. Il est donc tout à fait possible que, pour un visiteur, le <select> ne soit pas dans la zone recouverte par le menu. Dans ce cas, la disparition du <select> au survol du menu est plutôt déroutante, et fait un peu "bug grossier"

<edit modo="Olivier">C'est [b ] pas [B] (sans espace)</edit>

Le BBCode local est sensible à la casse (il exige les minuscules). Ce qui est plus une gêne qu'autre chose, d'ailleurs.
Modifié par Laurent Denis (07 Aug 2005 - 12:15)

Hi, merci de vos réponse, j'ai viré la fenetre dynamique pour cette partie du menu, elle m'etait pas indispenssable, merci

<parenthèse>
Ah OK pour le bbcode. Sur un autre forum que je connais c'est case sensitive mais avec des majuscule.
Si ce forum utilise la fonction preg_replace pour effectuer le travail, il suffit de rajouter l'option i pour rendre la regexp indifférente à la casse.
</parenthèse>

a écrit :

Masquer le <select> lorsque le menu se déroule a un défaut : la page ne sera pas obligatoirement affichée comme prévue dans tous les cas de figures. Il
est donc tout à fait possible que, pour un visiteur, le <select> ne soit pas dans la zone recouverte par le menu. Dans ce cas, la disparition du <select>
au survol du menu est plutôt déroutante, et fait un peu "bug grossier"
cligne
[/cite]

C'est peut-être un peu bourrin ce que je vais dire, mais il faudrait à ce moment-là faire un test de position des éléments pour savoir si la liste est dedans ou pas...

Exemple simplifié :
if (liste.left + liste.width >= menu.left || liste.left <= menu.left + menu.width) {
if (liste.top + liste.height >= menu.top || liste.top <= menu.top + menu.height) {

// La liste chevauche le menu donc on la masque
liste.style.display = "none";
}}

Mais là il y a encore un petit bug : si la liste ne chevauche que le menu à moitié...

C'est bourrin

Plus sérieusement, attention aux effets de multiplication :
- au départ, un effet déjà problématique à lui seul (pour l'accessibilité et l'ergonomie) : le menu déroulant, reposant sur une astuce javascript CSS
- puis une seconde astuce CSS javascript pour masquer un élément <select>
- puis une troisème astuce javascript pour déterminer s'il est nécessaire de masquer le <select>

Bilan: l'auteur se noie dans les délices de la technique, en oubliant totalement de se poser les questions :
- de l'intérêt de l'utilisateur dans tout cela
- du bien fondé du choix technique initial (le menu déroulant) du point de vue de l'utilisabilité

Je suis d'accord avec toi... et puis de toute façon le problème finirait par être insoluble autrement.