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

JavaScript Discussion :

Menu. Probleme sous IE


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de Pepito
    Profil pro
    Inscrit en
    Août 2004
    Messages
    101
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Août 2004
    Messages : 101
    Par défaut Menu. Probleme sous IE
    Ami(e) du jour, bonjour

    J'ai un probleme avec un menu dans mon site web avec le navigateur Internet Explorer.
    Vous pouvez voir les problemes a l'adresse suivante : http://raiders.eysines.free.fr

    Le premier probleme est l'espace qu'il y a entre les sous-rubriques. Je souhaite faire disparaitre cette espace vert entre les sous-rubriques.

    Le deuxieme probleme est que si on passe la sourie sur le menu bleu, les sous-rubriques bleues disparaissent derrierele menu rouge.
    J'ai essayé en mettant z-index, mais ca ne marche pas. Le fait de mettre z-index dans le CSS bloque l'apparition des sous-rubriques.

    Ces problemes ne se presentent pas sous Firefox.


    Voici le code HTML du menu
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
       <ul class="menuDeroulant">
       <li><a target="_top" href="$pageactuel"><img src="images/leclub.jpg" border="0"></a>
       <ul class="sousMenu">
       <li><a target="_top" href="pages.php?id=1"><img src="images/histoire.jpg" border="0"></a></li>
       <li><a target="_top" href="pages.php?id=3"><img src="images/palmares.jpg" border="0"></a></li>
       <li><a target="_top" href="pages.php?id=4"><img src="images/contacts.jpg" border="0"></a></li>
       </ul>
       </li>
       </ul>
    Voici le code du CSS
    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
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
     
    <style type="text/css">
    .menuDeroulant {
       background: #CC3333;
       list-style-type: none;
       margin: 0;
       padding: 0;
       border: 0;
    }
     
    .menuDeroulant li {
       float: left;
       margin: 0;
       padding: 0;
       border: 0;
       behavior:url('menu.htc');
       position:expression('relative');
       display:expression('inline');
       background: #CC3333;
    }
     
    .menuDeroulant li a:link, .menuDeroulant li a:visited {
       display: block;
       height: auto;
       color: #FFF;
       background: #00ff00;
       margin: 0;
       text-decoration: none;
    }
     
    .menuDeroulant li a:hover {}
    .menuDeroulant li a:active {}
     
    .menuDeroulant li ul.sousMenu {
       background: transparent url("fondTR.png") repeat;
       display: none;
       list-style-type: none;
       margin: 0;
       padding: 0;
       border: 0;
       left:expression(0);
       position:absolute;
       visibility:hidden;
    }
     
    .menuDeroulant li ul.sousMenu li {
       display:block;
       float: none;
       margin: 0;
       padding: 0;
       border: 0;
    }
     
    .menuDeroulant ul.sousMenu li a:link, .menuDeroulant ul.sousMenu li a:visited {
       display: block;
       color: #CC3333;
       margin: 0;
       border: 0;
       text-decoration: none;
    }
     
    .menuDeroulant ul.sousMenu li a:hover {
       background-image: none;
       background-color: #CC3333;
    }
     
    .menuDeroulant li:hover ul.sousMenu {
      visibility:visible;
    }
     
    .menuDeroulant li:hover>ul.sousMenu {
    display: block;
    }
     
    .menuDeroulant>li {
      display:table-cell;
    }
    </style>
    Code du JavaScript
    et voici la partie pour que le menu fonctionne sous Internet Explorer
    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
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
     
    <PUBLIC:COMPONENT>
       <PUBLIC:ATTACH EVENT="onmouseenter" ONEVENT="showSubMenu()" />
       <PUBLIC:ATTACH EVENT="onmouseleave"  ONEVENT="hideSubMenu()"  />
     
       <SCRIPT LANGUAGE="JScript">
        var menuBackground;
        var menuHighLight = 'rgb(0,255,0)'; // 204,33,33
     
        function showSubMenu() {
          // highlight current item
          menuBackground = style.backgroundColor;
          style.backgroundColor = menuHighLight;
          // z-index;
     
          // get sub menu
          var submenu = getElementsByTagName('ul')[0];
          if (submenu) {
            // workaround for windowed select object bug
            // that ignores zindex values
            var iframe = getElementsByTagName('iframe')[0];
            if (!iframe) {
              iframe = document.createElement('iframe');
              iframe.frameBorder=0;
              iframe.style.display='block';
              iframe.style.position='absolute';
              iframe.style.top=submenu.offsetTop;
              iframe.style.left=0;
              iframe.style.width=submenu.offsetWidth;
              iframe.style.height=submenu.offsetHeight;
              insertBefore(iframe, submenu);
            }
            // show sub menu
            submenu.style.visibility='visible';
            submenu.style.display='block';
            iframe.style.visibility='visible';
          }
        }
     
        function hideSubMenu() {
           // hide submenu
           var submenu = getElementsByTagName('ul')[0];
           if (submenu) {
              submenu.style.visibility='hidden';
              submenu.style.display='none';
              getElementsByTagName('iframe')[0].style.visibility='hidden';
           }
        }
     
       </SCRIPT>
    </PUBLIC:COMPONENT>

    Je pense que le probleme vient du javaScript car le menu marche sous Firefox et la partie JavaScript ne sert qu'au menu a fonctionner sous Internet Explorer.


    Avez vous une idée d'où proviendrai le probleme ??
    Merci d'avance pour vos reponses.

    Merki
    Pepit'

  2. #2
    Membre Expert
    Inscrit en
    Septembre 2002
    Messages
    2 307
    Détails du profil
    Informations forums :
    Inscription : Septembre 2002
    Messages : 2 307
    Par défaut
    img{margin: 0,0,0,0;
    padding: 0,0,0,0;}

  3. #3
    Expert confirmé
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Par défaut
    rechercher sur le site de msdn menu.htc

    qui permet d'avoir un menu déroulant IE pret à l'emploi

    A+JYT
    PS: j'ai posté il y a quelques mois un menu ccs htc compatible IE FF et Safari

  4. #4
    Membre confirmé Avatar de Pepito
    Profil pro
    Inscrit en
    Août 2004
    Messages
    101
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Août 2004
    Messages : 101
    Par défaut
    Pour repondre a Matthieu2000, j'ai rajouté son code dans la partie CSS, mais ca n'a rien fait de plus sous IE.
    Je ne vois pas où le mettre ailleurs !?

    Pour Sekaijin, j'ai cherché sous le site de microsoft, mais je n'ai pas trouvé mon bonheur. Je vais continuer a chercher.

    J'ai également regardé tous tes messages (108 exactements) mais je n'ai pas trouvé le code du menu. moi aussi il me semble qu'il y avait un code d'un menu htc dont je m'etais inspiré mais je ne le trouve plus sur developpez.com !!

    Donc j'ai toujours mes deux problemes :
    - l'espace entre les differentes sous-rubriques que j'aimerai voir disparaitre et que j'ai mis en vert pour que ca soit visible.
    - la disparition des sous-rubriques du menu bleu sous le menu rouge


    Merki a vous deux et a tous ceux qui veulent m'aider.
    Pepit'

Discussions similaires

  1. Probleme Interface Menu SWF Sous VB6
    Par sooprano dans le forum VB 6 et antérieur
    Réponses: 4
    Dernier message: 22/03/2008, 14h42
  2. Probleme avec alignement des items d'un menu horizontal sous IE
    Par van___fanel dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 05/12/2007, 18h00
  3. Probleme de menu deroulant Sous IE6
    Par Althor dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 22/09/2006, 14h31
  4. [CSS] Menu : probleme sous IE
    Par Jibees dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 07/04/2006, 12h14
  5. Menu - probleme sous IE et pas sous FF
    Par Pepito dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 10/11/2005, 15h26

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