[Résolu] - Problème de liste imbriquée UL LI sous IE 6

Bonjour à tous,

J'ai un souci de listes imbriquées sous IE 6. Je veux créer une "indentation" de sous-niveau de liste en utilisant ce code :

<ul>
  <li><a href="" title="">Fusce ligula nisl</a></li>
  <li><a href="" title="">Luctus sed tempor ut</a></li>
  <li><a href="" title="">Egestas in tellus</a></li>
  <li><a href="" title="">Nulla facilisi</a></li>
  <li>
    <ul>
      <li><a href="" title="">Egestas in tellus</a></li>
      <li><a href="" title="">Nulla facilisi</a></li>
    </ul>
  </li>
  <li><a href="" title="">Nulla tincidunt</a></li>
  <li><a href="" title="">Fusce ligula nisl</a></li>
  <li><a href="" title="">Luctus sed tempor ut</a></li>
</ul>

avec ce bout de css :

.navigation {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .7em;}
  .navigation p {background-color: #f1f1f1; border-top: 2px solid #e6e6e6; border-bottom: 1px solid #fff; padding: 4px 10px; margin:0; font-weight: bold; text-transform:uppercase;}
  .fonce p {background: transparent url(../images/degrade.gif) scroll repeat-x 0 0; color: #ccc; border: none; padding: 4px 10px; margin:0; font-weight: bold; text-transform:uppercase;}
    .navigation ul {margin: 0 0 20px 0; padding: 0; list-style: none outside;}
      .navigation ul li {border-bottom: 1px solid #e6e6e6; font-weight: bold; color:#666; }  
        .navigation ul li a {font-weight: normal; display: block; padding: 4px 10px; }
        .navigation ul li a:hover,
        .navigation ul li a:active {background-color: #E85801; color: #fff; }
							
        .navigation ul li ul {margin-bottom: 0; margin-top: 0; padding-top: 0; }	
          .navigation ul li ul li {padding-left: 10px; margin-top: 0; padding-top: 0; }

Seulement voila, quand j'ajoute une bordure sur IE pour identifier le bloc qui pose problème, le bug disparait ! Voir exemple ci-dessous:


Quelqu'un a une idée ?
D'avance merci !
Modifié par montoumes (14 Dec 2009 - 14:13)

Salut,

Pour qu'il y ait une solution à ton problème, encore faut-il qu'il y ait un problème clairement exposé, ce qui n'est pas le cas de ton sujet. Il serait en effet bon que tu mettes toutes les chances de ton côté pour que nous comprenions ton problème, et que nous puissions t'y apporter une ou plusieurs solutions.

Dans l'ordre de priorité, tu peux nous fournir :
1. un descriptif très précis de ton problème, impératif pour focaliser notre recherche dans le bons sens.
2. un lien vers une page en ligne, qui permet de constater ce problème par nous même, ne nécessitant parfois pas d'autres informations.
3. l'intégralité du code html et css produit dans le navigateur (et pas seulement des extraits, car le problème se situe parfois ailleurs dans le code).
4. des schémas ou captures d'écran.

La rapidité d'obtention de la réponse dépendra de la qualité les informations que tu nous fourniras.

Bonne chance à toi.

Pardon, j'avais cru être clair, mais je me suis trompé

Voici un espace de test : http://egyptopedia.fr/gabarit/gabarit.html

Le problème est que sous IE, la liste en colonne de droite (avec l'intitulé "lorem ipsum" sur fond noir) ne se comporte pas comme sur les autres navigateurs : un espace est généré entre
* Nulla facilisi et o Egestas in tellus (cf partie gauche de la capture que j'ai fournie précédemment).

Le problème vient du fait que j'ai intégré une liste ul/li dans une autre liste ul/li, mais je n'arrive pas à le résoudre.

Bonjour,


Tu trouveras dans l'excellent article de Florent V. (et en visitant les liens associés) tout ce qu'il y a à savoir sur un mécanisme interne du moteur de rendu d'Internet Explorer, le hasLayout:
http://www.alsacreations.com/article/lire/76-haslayout-internet-explorer.html

En ajoutant une bordure pour tenter "d'identifier le bloc qui pose problème", tu solutionnes, sans le savoir, ce petit souci de rendu, comme tu pourras le lire, il y a d'autres solutions.

Très cordialement,
Sylvain

Ok merci beaucoup !

Pour ceux que ça intéresse, j'ai choisit la solution "zoom:1;" appliquée à
.navigation ul li ul {margin-bottom: 0; margin-top: 0; padding-top: 0; zoom:1;}

Merci encore !