[résolu] Retour à la ligne intempestif sous IE après un <li>

Bonjour,

J'ai un ptit souci en créant un menu.

J'ai basiquement créé un menu composé de listes de définition, la description <dd> comprenant une liste <ul>.
Pour être plus clair, voici mon code :

<div class="menu">
      <dl onmouseover="javascript:displayMenu(this,'on');" onmouseout="javascript:displayMenu(this,'out');">
        <dt>Test 1</dt>
          <dd><ul>
            <li><a href="#">Test 1.1</a></li>
            <li><a href="#">Test 1.2</a></li>
            <li><a href="#">Test 1.3</a></li>
          </ul></dd>
      </dl>
      <dl onmouseover="javascript:displayMenu(this,'on');" onmouseout="javascript:displayMenu(this,'out');">
        <dt>Test 2</dt>
          <dd><ul>
            <li><a href="#">Test 2.1</a></li>
            <li><a href="#">Test 2.2</a></li>
          </ul></dd>
      </dl>
      <dl onmouseover="javascript:displayMenu(this,'on');" onmouseout="javascript:displayMenu(this,'out');">
        <dt>Test 3</dt>
          <dd><ul>
            <li><a href="#">Test 3.1</a></li>
            <li><a href="#">Test 3.2</a></li>
            <li><a href="#">Test 3.3</a></li>
            <li><a href="#">Test 3.4</a></li>
          </ul></dd>
      </dl>
      <dl onmouseover="javascript:displayMenu(this,'on');" onmouseout="javascript:displayMenu(this,'out');">
        <dt>Test 4</dt>
          <dd><ul>
            <li><a href="#">Test 4.1</a></li>
            <li><a href="#">Test 4.2</a></li>
            <li><a href="#">Test 4.3</a></li>
          </ul></dd>
      </dl>
    </div>

et ma feuille de style :

      body, dl, dt, dd, ul, li {
        margin:0;
        padding:0;
      }
      body {
      background: url(beaujolais.jpg) no-repeat;
      }
      ul {
        list-style-type:none;
      }
      .menu dt, .menu dd, .menu li, .menu a {
        font-family: Arial ;
        font-size: 10pt;
      }
      .menu a:link, .menu a:visited, .menu a:active {
        display: block ;
        text-decoration: none;
        color: white ;
        padding: 2px 5px 2px 15px ;
      }
      .menu a:hover {
        display: block ;
        background: #444444;
        color: orange ;
        text-decoration: none;
      }
      .menu dl {
        float:left;
      }
      .menu dt {
        color: white;
        border-left:1px solid white;
        border-right:1px solid black;
        height:25px;
        border-top:0;
        border-bottom:0;
        width:100px;
        background:#555555;
        text-align:center;
        font-weight:bold;
      }
      .menu dd {
        padding: 5px 0 5px 0;
        color: white;
        display:none;
        width:150px;
        position:absolute;
        top:25px;
        background: #333333 ;
        -moz-opacity:0.9;
        opacity: 0.9;
        filter:alpha(opacity=90);
      }

Sous IE6 donc, ma liste de sous menu s'affiche comme tel :

http://guezennec.pierre.free.fr/ftp/htmlpb1.png
(retour à la ligne entre deux items du menu qui n'a rien à faire là - mis en évidence par une sélection, d'où donc le background blanc du texte )

Alors que l'affichage exact devrait être celui-ci (FF) :

http://guezennec.pierre.free.fr/ftp/htmlpb2.png

En gros, pas de problème de margin, de padding ou autre connu, mais bien un problème de retour à la ligne en trop sous IE qui n'a pas lieu d'être.

Ce problème peut être corrigé en écrivant dans moin fichier le code du sous-menu comme ceci :

<dd><ul><li><a href="#">Test 1.1</a></li><li><a href="#">Test 1.2</a></li><li><a href="#">Test 1.3</a></li></ul></dd>

tout sur la même ligne quoi.
Ce qui, vous en conviendrez, n'est vraiment pas très élégant, et surtout, pas très pratique et lisible pour le codeur que j'suis


Avez-vous une idée de la solution au problème, un truc d'encodage particulier par exemple ?

Je sèche un ptit peu pour ma part ...
Modifié par PierreG (24 Nov 2007 - 17:10)

Je suis sûr d'avoir lu un "billet" de Florent V sur ce problème, mais je n'arrive pas à mettre la main dessus

Florent ?

6l20 a écrit :
Je suis sûr d'avoir lu un "billet" de Florent V sur ce problème, mais je n'arrive pas à mettre la main dessus

Florent ?

<dénonce> en même temps il en écrit tellement des billets Florent V ! </dénonce>

Merci, j'ai zoné un peu le fameux blog de Florent V, et j'ai trouvé un lien vers ça :
http://blog.alsacreations.com/2006/10/20/294-impact-sur-le-rendu-de-la-mise-en-forme-du-code-html
en page 10
(oui, je suis motivé)

Donc, résultat du problème : un bug de IE bien sûr !

Solution (ou plutôt "bidouille") ici :
http://www.test.blog-and-blues.org/haslayout/tests/list5.html

Mikachu a écrit :

<dénonce> en même temps il en écrit tellement (trop ?) des billets Florent V ! </dénonce>

Comment ça balance ici

N'empêche j'avais raison ...

Oui parfois je me contente d'un rien...