[Résolu] Liste imbriquées Problème IE

Bonjour à tous,

Ca faisait un petit moment que je n'avais plus posté ici, je pensais commencer à prendre le dessus sur les CSS, apparement non

Mon problème concerne IE6 (pour changer... ) et une liste imbriquée typique d'un menu.

Voila le code HTML

<ul class="topnav">
<li><a href="index.php?id=34" title="Problèmes économiques">Problèmes économiques</a>
<ul>
<li><a href="index.php?id=35" title="Paradigmes">Paradigmes</a></li>
<li><a href="index.php?id=36" title="Indicateurs">Indicateurs</a></li>
<li class="last"><a href="index.php?id=37" title="Cours élémentaires à complexe de micro et macro-économie">Cours de micro et macro-économie</a></li>
</ul>
</li>
<li><a href="index.php?id=38" title="Problèmes ressources matières">Problèmes ressources</a>
<ul>
<li><a href="index.php?id=40" title="Ressources minières">Ressources minières</a></li>

<li><a href="index.php?id=41" title="Ressources en eau">Ressources en eau</a></li>
<li class="last"><a href="index.php?id=42" title="Ressources agricoles">Ressources agricoles</a></li>
</ul>
</li>
<li><a href="index.php?id=43" title="Problèmes énergétiques">Problèmes énergétiques</a>
<ul>
<li><a href="index.php?id=44" title="Energies fossiles">Energies fossiles</a></li>
<li class="last"><a href="index.php?id=45" title="Energies renouvelables">Energies renouvelables</a></li>
</ul>
</li>
<li class="last"><a href="index.php?id=46" title="Problèmes de déchets de matière">Problèmes de déchets</a>

<ul>
<li><a href="index.php?id=47" title="Pollution chimique des eaux et des sols">Pollution chimique</a></li>
<li><a href="index.php?id=48" title="Pollution des métaux lourds dans l'eau et les sols">Pollution des métaux lourds</a></li>
<li class="last"><a href="index.php?id=49" title="Pollution de l'air">Pollution de l'air</a></li>
</ul>
</li>
</ul>

et le CSS

#content ul{
	margin:0px;
	padding:0px 10px 5px 15px;
	list-style-type:none;
}
#content ol{
	margin:0px;
	padding:0px 10px 5px 33px;
}
#content ul li{
	padding-bottom:7px;
	background:transparent url(images/arrow.gif) no-repeat 0px 5px;
	padding-left:10px;
}

#content ol li{
	padding-bottom:7px;
}
#content ul li ul{
	margin:8px 0px -7px 0px;
}

Et voici les résultats :

Sous Firefox (glop)

http://img91.imageshack.us/img91/274/pb1fp0.jpg

Sous IE (pas glop)

http://img99.imageshack.us/img99/4236/pb2wm3.jpg


Modifié par zmove (17 Nov 2006 - 13:26)

Bonjour.

Cette fois, c'est pas la faute à IE...

Plusieurs LI ne sont pas fermés :

	<li><a href="index.php?id=34" title="Problèmes économiques">Problèmes économiques</a>

	<li><a href="index.php?id=38" title="Problèmes ressources matières">Problèmes ressources</a>

	<li class="last"><a href="index.php?id=46" title="Problèmes de déchets de matière">Problèmes de déchets</a>

Il s'agit de listes imbriqués donc ils se ferment après le <ul> qui est dedans

<li> => Ouverture

<a href="index.php?id=34" title="Problèmes économiques">Problèmes économiques</a>
<ul>
<li><a href="index.php?id=35" title="Paradigmes">Paradigmes</a></li>
<li><a href="index.php?id=36" title="Indicateurs">Indicateurs</a></li>
<li class="last"><a href="index.php?id=37" title="Cours élémentaires à complexe de micro et macro-économie">Cours de micro et macro-économie</a></li>
</ul>

</li> => Fermeture

Il me semble que ma syntaxe est correct.

En tout cas, firefox vous approuve... Mais explorer fait son cinéma...

Donc, dans votre logique, vous incluez une sous-liste dans une ligne, alors qu'il est aussi possible d'inclure la sous-liste dans la liste... EDIT : Est faut. ne pas tenir compte...

EDIT : Est faut. ne pas tenir compte...
<ul>
	<li>elem</li>
	<ul>
		<li>elem</li>
		<li>elem</li>
	</ul>
</ul>

... et ça marchera sur toute les plate-formes...
Modifié par GeorgesM (17 Nov 2006 - 09:04)

Bonjour,

Attention, la syntaxe est (une liste imbriquée ... dans un li) :

<ul>

	<li>elem</li>
        <li>
	        <ul>
        		<li>elem</li>
         		<li>elem</li>
        	</ul>
          </li>
</ul>

Oops!
Désolé, j'ai dit pas mal de grosses bétises sur le sujet.

Effectivement, on imbrique les listes dans les lignes. Désolé, je manque d'habitude. (merci, Véro)

Sinon, la règle qui pose problème est celle qui demande la marge négative :

#content ul li ul{
	margin:8px 0px -7px 0px;
}

Curieusement, il s'agit de la marge inférieure. Comment est-ce possible ?

effectivement la marge négative semblait poser problème.... J'aurai pourtant mis ma main à coupé d'avoir essayé de l'enlever pour tester (peut-être un problème de cache....)

En tout cas c'est réglé, merci beaucoup

Cache, ou proxy ...
Enfin, ça marche, et encore mes excuses pour les anneries.
Modifié par GeorgesM (17 Nov 2006 - 13:32)