[Résolu] Imbrication de liste - marge verticale

Bonjour.

Un petit problème avec des liste imbriquées sous IE7. J'ai épuré le problème jusqu'à avoir ce code html:

	<ul>
		<li>
			<ul>
				<li>Welcome</li>
			</ul>
		</li>
		<li>
			<ul>
				<li>Interlinkages</li>
			</ul>
		</li>
	</ul>

et en css:

ul		{ list-style-type:none; list-style-image:none; margin:0; padding:0; }
li		{ margin:0; padding:0; }
li ul li	{ background-color: #FF0000; }

Et je ne sais pas comment supprimer la marge entre les 2 items sous IE (le 7 en tout cas). Je précise que j'ai besoin des deux listes imbriquées parce que normalement j'ai beaucoup plus d'items.

Merci

EDIT: Une petite capture d'écran du problème sous IE7:
Et après vérif, même problème sous IE6.
Modifié par <nicolas> (15 May 2007 - 17:48)

yop !

je suis pas sur du tout, mais essaye de mettre tes paddings a 1px au lieu de 0 pour voir....

J'avais un problème d'espace incompressible sous IE (alors que ca marchais sous firefox), et le problème venait de la (je retrouve le topic que j'ai lu et je poste le lien )

EDIT :
http://forum.alsacreations.com/topic.php?fid=4&tid=24923&s=bordure

je viens de tester, je confirme :

li	
	{ margin:0; padding:1px; }

Ca marche comme ca, maintenant il y a peut etre moyen de faire plus propre, jette un oeil sur le lien si tu veux plus d'explications.
Modifié par philipPF28 (15 May 2007 - 11:28)

Tiens oui c'est bizarre, à priori ça devrait être collé.
Es-tu certain que tes éléments de listes (ou listes elles-mêmes) n'héritent pas de propriétés précédemment définies? Sinon, as-tu essayé (juste pour tester) d'annuler les marges et paddings par défaut sur l'ensemble des éléments grâce au sélecteur universel?

La solution du padding:1px à l'air de fonctionner sur mon exemple. Le problème c'est que normalement la couleur de fond se trouve sur un a à l'intérieur de li afin qu'il puisse changer en rollover. Donc le padding fait apparaître un espace entre chaque ligne.

Et supprimer les marges avec le sélecteur universel ne change rien.
Modifié par <nicolas> (15 May 2007 - 11:46)

En effet c'est problématique

Une solution : a la place du padding a 1px, utilise une bordure de la même couleur que ton fond :

li		
{ margin:0; padding:0;  border-top : 1px solid red;}

La bordure a aussi pour effet de supprimer ce problème de marge, et ca t'évite d'avoir un espace blanc entre 2 lignes rouges... Maintenant si ton fond change de couleur, va falloir aussi changer la couleur de la bordure... C'est un peu de la bidouille, mais a priori ca peut marcher, si quelqu'un a une meilleure solution
Modifié par philipPF28 (15 May 2007 - 12:14)

Oui mais malheureusement le li:hover ne fonctionne pas sur IE. Sinon j'aurais donné la couleur de fond directement aux li.

En fait ce sont les ul qui sont décalés. J'ai donc pour l'instant donné une marge top négative en commentaires conditionnels pour IE. En croisant les doigts pour que ce décalage soit visible uniquement sur IE, et identique partout... (même si c'est jamais bon de devoir croiser les doigts..)

Après plusieurs test, l'affichage sous IE était encore plus buggué. Plusieurs marges différentes (0px, 4px, 19px) entre les différents items. Sous IE7 seulement un gros décalage de 16px.

Finalement, j'ai réussi à résoudre le problème en appliquant un float:left sur les items concernés. Je soupçonne le même genre de problème que lorsqu'on a plusieurs images en display:inline mais avec des retours à la ligne dans le code html qui provoquent une marge entre chaque image.
Modifié par <nicolas> (15 May 2007 - 17:49)