Menu déroulant qui va pas avec IE

Version imprimable

26/02/2009, 12h07
jlb59

Menu déroulant qui va pas avec IE

Bonjour à tous,

J'ai un très gros problème concernant le menu déroulant.

En effet, tous les navigateurs en ma possession (Safari, FF et Opera) accepte bien le menu ... sauf IE

J'ai essayé plusieurs menus déroulant... ça marche quand c'est tout seul, mais pas dans mon site (avec IE tout au moins!).

Ce qui est gênant, c'est qu'en ligne, il n'y a que IE qui fait des siennes. Surtout que le déroulant est important.

J'ai essayé de mettre le JS et le CSS dans la même page que le menu, mais rien n'y fait (Grrr!!!), alors je les ai remis avec les autres. Bien-sûr, le chemin a été changé dans l'index.

Comme mon site est géré par "index.php", c'est le seul qui contienne le Doctype et les balises metas, c'est par lui que toutes les pages sont appelées.
C'est la seule façon de bien passer au W3C, sinon, il y a pas mal d'erreurs.

Comme je suis limité en largeur, je suis obligé de faire le déroulant.

Est-ce quelqu'un aurait une idée de la chose et le moyen d'y remédier ?

Voici l'adresse de mon site, et constaterez le hic ! http://qi98.free.fr/

Merci d'avance.
26/02/2009, 15h58
Ethyde

Bonjour,

je n'ait pas trop le temps de faire une analyse plus profonde sous IE, mais je dirais que ton problème viens soit de tes float, soit des positions.

Essaye de rajouter un z-index sur tes sous-menu pour les faire remonter au dessus des block de menu et contenu.
26/02/2009, 17h28
jlb59

Citation:

Envoyé par Ethyde

Bonjour,

je n'ait pas trop le temps de faire une analyse plus profonde sous IE, mais je dirais que ton problème viens soit de tes float, soit des positions.

Essaye de rajouter un z-index sur tes sous-menu pour les faire remonter au dessus des block de menu et contenu.

J'avais essayé de modifier les Float, mais c'était encore pire.
Quant aux Z-index pour les sous-menus, rien n'y fait, aucun changement.

Ce que je comprends pas, mais alors pas du tout, c'est que "à vide", càd uniquement que le html contenant le menu, c'est impec, et dans tous mes navigateurs.
Il n'y a que quand je le merts sur mon site que ça marche plus...
26/02/2009, 17h42
Ethyde
Hum je viens de remarqué que tu avais indiqué un height à 0 pour le hauteur de tes sous menu. Essayer de l'enlever :)
Code:

1 2 3 4 5 6 7 8 9 .menu_h ul ul { border-top:1px solid #000000; height:0; left:0; position:absolute; top:21px; visibility:hidden; width:110px; }
26/02/2009, 18h19
jlb59

Citation:

Envoyé par Ethyde

Hum je viens de remarqué que tu avais indiqué un height à 0 pour le hauteur de tes sous menu. Essayer de l'enlever :)

T'as vu ça où ?
Le menu pris du le SdZ n'est pas encore en ligne 8O

Après 5 min.
-----------

J'ai vu ça sur le menu actuel, j'ai enlevé le height:0, mais y a pas de changement.
26/02/2009, 19h01
Erwan31

Bonsoir jbl,
en effet veille à supprimer tous ces height (ceux qui sont possibles) qui peuvent poser des problèmes d'accessibilité en cas d'agrandissement des caractère ou de redéfinition de la taille de texte par défaut par l'utilisateur.

ça vient du filter : alpha(opacity=98) de tes li qui peut poser parfois ce type de désagrément en plus de dégrader le lissage de tes textes.

Tu as beaucoup trop de code superflu 8O
Pour l'apparition du menu ce code suffit

Code:

.menu_h li:hover ul {visibility:visible}

Ton menu est inaccessible sir IE6 (car le pseudo-classe ;hover ne s'applique sur sur les ancre lien dans ces versions), donc tu te prives d'environ 19% d'utilisateur (selon la cible) ce qui est encore énorme.

De toute façon dis toi bien que tu ne peux pas obtenir de menu déroulant suffisamment accessible sans passer par Javascript.
Je te conseil d'aller faire un tour sur les ressources Developpez, tu trouveras des modèle de menu déroulant ;)
26/02/2009, 21h31
Ethyde

Citation:

Envoyé par Erwan31

Ton menu est inaccessible sir IE6 (car le pseudo-classe ;hover ne s'applique sur sur les ancre lien dans ces versions), donc tu te prives d'environ 19% d'utilisateur (selon la cible) ce qui est encore énorme.

De toute façon dis toi bien que tu ne peux pas obtenir de menu déroulant suffisamment accessible sans passer par Javascript.
Je te conseil d'aller faire un tour sur les ressources Developpez, tu trouveras des modèle de menu déroulant ;)

Hum il existe des solutions pourtant : pour "corriger" le probleme de comportement d'IE6 un simple fichier htc appelé par un commentaire conditionnel fonctionneras très bien; et si l'on ne veux vraiment pas avoir a ajouter de code externe il est possible, bien que cela demande un peu plus de travail sur les css de fournir a IE6 des structure html et css apte a assurer le même rendu sans ajout de code superflu.

Le CSSHover

Et un exemple de menu fait entièrement en css sans javascript valide, accessibilité évalué avec Fang
26/02/2009, 22h51
Macmillenium

Bonsoir,

Citation:

Envoyé par Ethyde

Hum il existe des solutions pourtant : pour "corriger" le probleme de comportement d'IE6 un simple fichier htc appelé par un commentaire conditionnel fonctionneras très bien

Les HTC contiennent déjà du javascript.
Vu leurs structure lourde et complexe, il est préférable de passer directement par une "surcouche" javascript propre.
26/02/2009, 23h10
Ethyde

Citation:

Envoyé par Macmillenium

Les HTC contiennent déjà du javascript.
Vu leurs structure lourde et complexe, il est préférable de passer directement par une "surcouche" javascript propre.

Oui enfin ça dépend (^^) d'une part car il existe des solutions sans rien de plus que du css (cf mon second exemple), d'autres part car une solution javascript de même que htc demande que ceux ci sois activer sur le poste client, ce qui suivant l'environnement (intranet par exemple) peut ne pas être possible.

Ce n'est au final qu'un choix personnel que d'utiliser l'une ou l'autre des technique toutes ayant leurs avantages et leurs inconvénients :)

[Edit] Ah et tant que j'y pense et au cas ou certain se posais la question : les sous - menu apparaisse bien sous IE et à la bonne place, mais sous les <div> "menu2" et "corp".
26/02/2009, 23h40
Macmillenium

Citation:

Envoyé par Ethyde

Oui enfin ça dépend (^^) d'une part car il existe des solutions sans rien de plus que du css (cf mon second exemple)

Vu le code HTML (si tu parle de l'exemple sur cssplay) je peux te dire que c'est vraiment du bricolage ;)

De toute façon sans ou avec Javascript les menus déroulants posent des problèmes d'accessibilité.
27/02/2009, 00h21
Ethyde

Citation:

Envoyé par Macmillenium

Vu le code HTML (si tu parle de l'exemple sur cssplay) je peux te dire que c'est vraiment du bricolage ;)

Oui ou une façon ingénieuse d'utiliser la seule ressource permettant de gérer des problématique que seul IE pose ;)

Ceci dit, et pour éviter tout mal-entendu, je suis d'accord avec toi la combinaison de css + javascript est une possibilité qui à de nombreux avantages pour elle (ne serais ce que parce que elle respecte la séparation mise en page (css) / action (javascript) ), mais c'est faux de dire que c'est la meilleur, ou la seule :D
27/02/2009, 00h43
Erwan31

Citation:

Envoyé par Ethyde

mais c'est faux de dire que c'est la meilleur, ou la seule :D

Je vois pas quel autre language permettrait d'obtenir un menu plus accessible :roll:
CSS ne permet par exemple pas de fournir à l'utilisateur un laps de temps lorsqu'il quitte un élément de menu avant de le faire disparaitre. Cela peut permettre aux personnes souffrant de handicap moteur d'utiliser plus facilement le menu.

Pour les exemple de menu qui fonctionnent sous IE6 sans JS:
http://yidille.free.fr/plux/valign/i...-compatible-i6

Pour un menu en JS d'un bon niveau d'accessibilité : http://www.fairytells.net/gabarit_ac...enu6.php#skip4