Problèmes de listes imbriquées

[petit-ourson]

Bonjour,

J'essaie d'imbriquer des listes (<ul>) mais sous IE j'ai un espace entre mes deux listes.

  <ul style="margin:0;padding:0">
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>

    <ul style="margin:0;padding:0;color:#AABBCC;">
   	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
   	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
   	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
   	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
    </ul>      
    
 	 </li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
 	 <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
  </ul>

Il ne prend pas en compte mon margin:0 et padding:0 sur mon 2e <ul>.

petit-ourson

[Country]

Apparemment IE laisse un espace pour le texte que tu mettrai entre <li> et <ul> (d'ailleurs je trouverai plus logique que tu place un texte à cet endroit).

Néanmoins, après quelques tests j'ai réussi à éviter cet espace en rajoutant

display:inline;

dans le style du 2ème <ul>

[skale]

bonjour,

c'est peut-être le <li> qui contient la deuxième liste qui pose problème, tu peux pour cette balise aussi préciser margin:0 et padding:0

Ensuite pour être valide XHTML (si ça t'intéresse), tu dois mettre la deuxième liste dans un bloc div.

ce qui donne :

<li style="margin:0;padding:0;">
<div style="margin:0;padding:0;">
   <ul style="margin:0;padding:0;color:#AABBCC;">
    <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
    <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
    <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
    <li>Tutoriel Eclipse : Création d'un plugin Assembleur (1ère partie)</li>
   </ul>      
</div>   
</li>

skale

[Country]

Ensuite pour être valide XHTML (si ça t'intéresse), tu dois mettre la deuxième liste dans un bloc div.

En quoi mettre la deuxième liste directement dans le <li> ne serai pas valide XHTML ?

J'ai toujours fait de cette manière et cela passe très bien au validateur, je ne voit pas l'intéret de rajouter un div

[skale]

autant pour moi! j'ai mal interprété la DTD du XHTML strict. li peut contenir un flow, qui peut contenir un bloc qui peut contenir une liste : pas besoin de div alors.

[petit-ourson]

Apparemment IE laisse un espace pour le texte que tu mettrai entre <li> et <ul> (d'ailleurs je trouverai plus logique que tu place un texte à cet endroit).

Néanmoins, après quelques tests j'ai réussi à éviter cet espace en rajoutant

display:inline;

dans le style du 2ème <ul>

<{POST_SNAPBACK}>

Effctivement, je suis passé à côté de cela ;o)

Merci