[Résolu] Bug des plus mystérieux avec IE

Bonjour,

j'utilise une image à zônes réactives pour faire une sorte de menu. Sous FF, tout se passe très bien... sur IE ça marche aussi à l'exception du lien"saxophone" où il faut cliquer précisément sur le "e" final pour ouvrir la page. or comme vous pouvez le voir, la zône cliquable est bien plus grande...

#navigation {
                 position: absolute;
                 height: 507px;
                 width :507px;
                 top: 33px;
                 left: 100px ;
                 }

#navigation ul {

                  height: 507px;
                  width :507px;
                  background: url(navigation/instrum.gif) no-repeat;
               }

#navigation a {
               position:absolute;
               display:block;
               text-decoration:none;
               cursor: pointer;
               }

#saxophone {
        width:  160px;
        height: 68px;
        top:    24px;
        left:   118px;
        padding: 0;
        border: 1px solid black;
       }
/*Tous les autres instruments sont positionnés de la même manière*/


(...)

     <div id="navigation">
          <ul>
               <li><a id="saxophone"  title="saxophone"  accesskey="1" href="instrum.php?id=1"></a></li>
               <li><a id="clarinette" title="clarinette" accesskey="2" href="instrum.php?id=2"></a></li>
               <li><a id="flute"      title="flûte"      accesskey="3" href="instrum.php?id=3"></a></li>
               <li><a id="cor"        title="saxophone"  accesskey="4" href="instrum.php?id=4"></a></li>
               <li><a id="cornet"     title="cornet"     accesskey="5" href="instrum.php?id=5"></a></li>
               <li><a id="trombone"   title="trombone"   accesskey="6" href="instrum.php?id=6"></a></li>
               <li><a id="alto"       title="alto"       accesskey="7" href="instrum.php?id=7"></a></li>
               <li><a id="basse"      title="basse"      accesskey="8" href="instrum.php?id=8"></a></li>
               <li><a id="euphonium"  title="euphonium"  accesskey="9" href="instrum.php?id=9"></a></li>

          </ul></div> 

Modifié par p_tite_jo (14 Nov 2005 - 12:46)

Bonjour,

Revoir le centrage de la page. Le text-align:center est à l'origine du bug. Utiliser un #wrapper, éventuellement, plutôt que de centrer directement via les éléments xhtml et body.

merci pour ta réponse... peux-tu m'indiquer un tutos ou un article sur le wrapper ? j'en ai jamais entendu parler (honte à moi ? ). merci beaucoup
Modifié par p_tite_jo (11 Nov 2005 - 12:03)

Bonjour,
j'avais une autre solution, alors comme je l'ai trouvée pendant que Laurent a posté son message, je la mets quand même, histoire de...

Alors moi j'aurais mis les id aux <li> plutôt qu'aux <a>:

<li id="saxophone><a..."

ensuite j'aurais appliqué le position:absolute aux li et non plus aux a:

#navigation li{
position:absolute;
}

enfin j'aurais mis aux liens:

#navigation a{
width:100%; height:100%;
}

pour qu'ils prennent toute la place dans les li

Apparemment ça marche, le désavantage c'est que moi je n'expliquais pas pourquoi ça ne marchait pas avant, donc pour ça: merci Laurent

Bonne journée
Modifié par energizer (11 Nov 2005 - 12:11)

Merci beaucoup à vous deux pour vos réponses rapides et claires. J'ai adopté la solution de Laurent Denis étant donné que je l'ai vue en premier en enlevant simplement les text-align center qui n'avaient plus aucune influence sur ma mise en page...et merci energizer, je prends note de ta solution pour une eventuelle future page! A bientôt