IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Menu déroulant qui va pas avec IE


Sujet :

HTML

  1. #1
    Membre actif
    Avatar de jlb59
    Homme Profil pro
    Retraité
    Inscrit en
    Août 2004
    Messages
    986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2004
    Messages : 986
    Points : 240
    Points
    240
    Par défaut 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.

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Février 2009
    Messages
    308
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2009
    Messages : 308
    Points : 349
    Points
    349
    Par défaut
    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.

  3. #3
    Membre actif
    Avatar de jlb59
    Homme Profil pro
    Retraité
    Inscrit en
    Août 2004
    Messages
    986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2004
    Messages : 986
    Points : 240
    Points
    240
    Par défaut
    Citation Envoyé par Ethyde Voir le message
    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...

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Février 2009
    Messages
    308
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2009
    Messages : 308
    Points : 349
    Points
    349
    Par défaut
    Hum je viens de remarqué que tu avais indiqué un height à 0 pour le hauteur de tes sous menu. Essayer de l'enlever

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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;
    }

  5. #5
    Membre actif
    Avatar de jlb59
    Homme Profil pro
    Retraité
    Inscrit en
    Août 2004
    Messages
    986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2004
    Messages : 986
    Points : 240
    Points
    240
    Par défaut
    Citation Envoyé par Ethyde Voir le message
    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

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

    J'ai vu ça sur le menu actuel, j'ai enlevé le height:0, mais y a pas de changement.

  6. #6
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Points : 2 444
    Points
    2 444
    Par défaut
    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
    Pour l'apparition du menu ce code suffit

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    .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

  7. #7
    Membre averti
    Profil pro
    Inscrit en
    Février 2009
    Messages
    308
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2009
    Messages : 308
    Points : 349
    Points
    349
    Par défaut
    Citation Envoyé par Erwan31 Voir le message
    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

  8. #8
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Points : 3 747
    Points
    3 747
    Par défaut
    Bonsoir,

    Citation Envoyé par Ethyde Voir le message
    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.

  9. #9
    Membre averti
    Profil pro
    Inscrit en
    Février 2009
    Messages
    308
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2009
    Messages : 308
    Points : 349
    Points
    349
    Par défaut
    Citation Envoyé par Macmillenium Voir le message
    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".

  10. #10
    Rédacteur
    Avatar de Macmillenium
    Homme Profil pro
    Développeur front-end
    Inscrit en
    Mars 2008
    Messages
    2 333
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur front-end
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 2 333
    Points : 3 747
    Points
    3 747
    Par défaut
    Citation Envoyé par Ethyde Voir le message
    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é.

  11. #11
    Membre averti
    Profil pro
    Inscrit en
    Février 2009
    Messages
    308
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2009
    Messages : 308
    Points : 349
    Points
    349
    Par défaut
    Citation Envoyé par Macmillenium Voir le message
    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

  12. #12
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Points : 2 444
    Points
    2 444
    Par défaut
    Citation Envoyé par Ethyde Voir le message
    mais c'est faux de dire que c'est la meilleur, ou la seule
    Je vois pas quel autre language permettrait d'obtenir un menu plus accessible
    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

Discussions similaires

  1. Réponses: 1
    Dernier message: 06/09/2014, 16h34
  2. Menu déroulant qui se décale avec IE 7
    Par nico44530 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 05/11/2012, 13h08
  3. menu déroulant qui ne fontionne pas avec IE7 et 8.
    Par cireultra dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 11/05/2009, 14h25
  4. Menu déroulant qui déroule pas sur un lien
    Par nhynhy dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 04/02/2009, 15h49
  5. menu déroulant qui s'active pas avec firefox
    Par Herveg dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 27/11/2008, 13h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo