Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bug sous IE

Sujet résolu
Char Aznable
    19 octobre 2006 à 20:09:31

    Bonsoir,

    j'ai un petit bug sous IE au niveau des menus déroulants.
    En fait, lorsque le menu se déroule, cela décale le menu qui se trouve sur la droite, ce qui est assez ennuyant pour la navigation.
    Regardez ce que ça donne : ici.

    J'aurais voulu savoir si vous auriez une solution pour éviter ce désagrément ?

    Merci d'avance.
    • Partager sur Facebook
    • Partager sur Twitter
    schumiga
      20 octobre 2006 à 5:20:14

      Ma résolution d'écran étant large, je ne vois pas de menu déroulant. Mais ce doit être parce que tu as mis une largeur fixe à ton contenu. Essaie de mettre une largeur maximale. Et sinon, ce serait plus facile si on pouvait voir ton code.
      • Partager sur Facebook
      • Partager sur Twitter
      Roadkiller
      • HTML / CSS
        20 octobre 2006 à 16:35:17

        chez pas de problème sous IE oups j'ai oublié j'ai IE 7 donc je peux aisséyer sous IE 6 désolé
        • Partager sur Facebook
        • Partager sur Twitter
        serionos
          20 octobre 2006 à 17:51:31

          comment as tu fais ton menu déroulant JS/CSS?
          • Partager sur Facebook
          • Partager sur Twitter
          Char Aznable
            21 octobre 2006 à 18:11:40

            Voilà le code CSS :

            #menu
            {
                    position: absolute !important; /* placement du menu*/
                    top: 15 !important;
                    z-index: 100 !important;
                    width: 99%;     
            }

            #menu dl, dt, dd, ul, li
            {
                    margin: 0;
                    padding: 0;

            }

            #menu dl
            {
                    float: left;
                    width: 6em;
            }

            #menu dt
            {
                    cursor: pointer;
                    text-align: center;
                    font-weight: bold;
                    background: #D4DBE1;
                    border: 1px solid #4C5A6F;
                    margin: 1px;
            }

            #menu dd
            {
                    display: none;
                    margin-top: 3px;
                    border: 1px solid #4C5A6F;
                    width: 11em;   
            }
            #menu ul
            {
                    list-style-type: none;
            }
            #menu li
            {
                    padding-left: 2px;
                    background: #fff;
                   
            }

            #menu li a, #menu dt a
            {
                    color: #4C5A6F;
                    text-decoration: none;
                    display: block;
                    height: 100%;
                    border: 0 none;
            }

            #menu dt a:hover, #menu dt a:focus
            {
                    background: #fff;
            }

            #menu li a:hover, #menu li a:focus
            {
                    background: #D4DBE1
            }


            Le JS :

            <!--
            window.onload=montre;
            function montre(id) {
            var d = document.getElementById(id);
                    for (var i = 1; i<=10; i++) {
                            if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
                    }
            if (d) {d.style.display='block';}
            }
            //-->


            • Partager sur Facebook
            • Partager sur Twitter
            Char Aznable
            Char Aznable
            Candygirl
              31 octobre 2006 à 9:43:35

              Le problème est que IE interprête le width comme un min-width. Il augmente donc la largeur de ton dl avec le contenu de ton dd. Un moyen pour contourner le problème serait de placer que le dd en absolute plutôt que tout le menu. QQch du genre:
              /* menu */
              #menu
              {
                      width: 99%;     
              }

              #menu dl, dt, dd, ul, li
              {
                      margin: 0;
                      padding: 0;

              }

              #menu dl
              {
                      float: left;
                      width: 6em;
                      position:relative;
              }

              #menu dt
              {
                      cursor: pointer;
                      text-align: center;
                      font-weight: bold;
                      background: #D4DBE1;
                      border: 1px solid #4C5A6F;
                      margin: 1px 1px 3px 1px;
              }

              #menu dd
              {
                      display: none;
                      margin: 7px 1px 1px 1px;
                      border: 1px solid #4C5A6F;
                      width: 11em;
                      /*width: 7em;*/
                      position:absolute; left:0; top:1.2em;
              }
              • Partager sur Facebook
              • Partager sur Twitter
              Char Aznable
                31 octobre 2006 à 21:08:13

                Je te remercie beaucoup ! Ca bugue plus comme ça.
                J'ai par contre laissé le position:absolute; et le top:15; sur le menu car sinon ça foirait sous IE. Et j'ai aussi modifié le top:1.2em; en top:1.7em;
                • Partager sur Facebook
                • Partager sur Twitter
                Candygirl
                  31 octobre 2006 à 21:21:30

                  ça foirait sur IE uniquement à cause du css que tu avais mis en bas expres pour IE ;) :

                  /* uniquement pour IE */
                  * html div#footer, * html div#corps{position:relative;top:20px;}


                  Si tu le vires, normalement tout rentrait dans l'ordre sur IE, sauf erreur...
                  • Partager sur Facebook
                  • Partager sur Twitter

                  Bug sous IE

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                  • Editeur ●
                  • Markdown