28173 sujets

CSS et mise en forme, CSS3

Div en float et espaces virtuels sous.... IE? vraiment?

Bien le bonjour à tous!

je suis face à un problème particulièrement ennuyeux, pour ne pas dire plus. En effet, j'ai un UL-LI où les LI contiennent 2 divs en float left. Jusque là, rien d'anormal. Tout va bien partout.

Le problème vient au moment où je set une hauteur au li. Et la, paf!, comme par miracle, j'ai un superbe espace qui vient se mettre sous le LI, sans raison apparente... sous IE.

Je comprend tellement rien que je sais même pas par où commencer pour debugger...

Sinon, juste pour dire :
1) Je pourrais utiliser des tables dans les LI, mais bof.
2) Je pourrais ne pas mettre de height aux LI, mais en fait, je dois le faire Smiley biggol

upload/8494-bugul.jpg

Merci d'avance pour les idées!
rekam
Modifié par rekam (15 Aug 2007 - 18:05)
Ah oui, juste... le voilà :


<html>
<head>
	<style>
	ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

	ul {
	padding-left: 18px;
	}

	li {
	clear: both;
	border: 1px solid red;
	padding: 0;
	margin: 0;
	}
	
	.h {
	height: 18px;
	}

	.before {
	float: left;
	padding: 0;
	margin: 0;
	background-color: #CCCCFF;
	}
	</style>
</head>	
<body>

<ul>
	<li><div class="before">juste un div sans height dans le li</div></li>
	<li>rien du tout</li>
	<li class="h"><div class="before">hop un autre div avec une height dans le li</div></li>
	<li>et voila le resultat :'( </li>
</ul>

</body>
</html>


Donc rien de compliqué ni de transcendant, à priori... Au passage, si je mets 1px comme hauteur pour le LI, ça ne change rien.
Modifié par rekam (15 Aug 2007 - 18:22)
Salut,

A priori les IE ont besoin de quelque chose à faire flotter après un float ...
Il y a peut être un solution moins bricolée Smiley cligne 

<style type="text/css">
	ul {
	padding-left: 18px;
	list-style: none;
	}

	li {
	background: yellow;
	clear: both;
	overflow: hidden;
	height: 1%;/*----------- pour ie6 -----------------*/
	}

	li span {
	float: left;
	background: lime;
	display: bloc;
	}

	.h {
	height: 18px;
	}

	</style>

</head>	
<body>
<ul>
	<li><span>juste un span sans height dans le li</span><em> </em></li>
	<li>rien du tout</li>	
	<li><span class="h">hop un autre span avec une height dans le li</span><em> </em></li>
	<li>et voila le resultat :'( </li>
</ul>
</body>
D'accord, merci bien.

J'ai pu constaté hier soir qu'en mettant une height à un DIV qui encapsulait tout le contenu du LI, ça fonctionnait. Cela dit, c'est un peu dommage... et bonjour la sémantique... Il faudrait avoir des balises normalisées HTML <debugIE /> histoire que la structure conserve un minimum de sens (si seulement c'était pour rire... Smiley langue )

mais bref, merci bien, ça fonctionne comme ça!

rekam
Ghost, je pense que le problème de rekam est l'espace de quelques pixels qui se rajoute entre le <li> contenant un float et le <li> suivant. Et, sauf erreur de ma part, ta version ne semble pas le corriger.

Néanmoins, ajouter le height:1% a tous les <li> contenant des float va permettre de débugguer tout ça un peu plus facilement.

Après test de ma part, il semble que lorsqu'un <li> contient un élément flottant (et que c'est <li> est correctement réincorporé dans le flux -hasLayout-), une sorte de margin-bottom de 4px lui soit rajoutée sans raison.

La seule technique que j'ai trouvée pour le moment consiste à rajouter un margin-bottom:-4px aux <li> pour IE6 (utilise les commentaires conditionnels pour charger une feuille de style spéciale pour IE6)

C'est pas trés élégant par contre, je suis sur qu'il existe une meilleure solution
Salut,

@Tymlis, sauf erreur, j'ai du tester la chose sous FF, IE7&6 et opera, tout semblait ok Smiley decu
Le margin négatif, j'y ai pensé mais, je voulais connaitre le fond du problème, là j'en traitais que les conséquences.
Re,

Mwoui,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">


upload/5854-test.jpg

Va comprendre !!

IE6 standalone, XP rien avant !!! Smiley biggol
Smiley eek
J'étais en loose, pas en strict, mais je viens de basculer en strict et j'ai toujours le même écart.
C'est assez étrange... IE6 standalone aussi, peut-être que ça vient de là, je sais pas

Voila le code complet :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>...</title>
</head>	

<body>
	<style type="text/css">
		ul {
			padding-left: 18px;
			list-style: none;
		}
		li {
			background: yellow;
			clear: both;
			overflow: hidden;
			height: 1%;/*----------- pour ie6 -----------------*/
		}
		li span {
			float: left;
			background: lime;
			display: block;
		}
		.h {
			height: 18px;
		}
	</style>

<body>
	<ul>
		<li><span>juste un span sans height dans le li</span><em> </em></li>
		<li>rien du tout</li>	
		<li><span class="h">hop un autre span avec une height dans le li</span><em> </em></li>
		<li>et voila le resultat :'( </li>
	</ul>
</body>

</html>
Je confirme l'écart de Tymlis avec son code.

Par ailleurs, fait intéressant, dans ton 1er LI, tu as un EM vide. Pour ma part, lorsqu'il est vide, j'ai le fameux espace sous LI. Si j'y met qqch, l'espace disparaît.

Mais ceci n'explique toujours pas pourquoi lorsque le LI à une height, comme pour le 3e, l'espace s'incruste quoiqu'on fasse...
Re,

Ca y est compris ! (J'suis têtu Smiley lol )

1° revois tes balises body et head ... C'est un peu en vrac
2° A l'interieur des balises <em> </em> il y a un espace insécable (&nbsp;) qui sert de "support" au float pour ie6, on aurait pu y mettre n'importe quoi en visibility: hidden d'ailleurs) Il a disparu dans le post (surement l'interpretation BBcode)

Désolé, je n'avais pas remarqué à la relecture de mon post !!
Han oui, j'avais un body en balade. Toutes mes confuses ^^

Et c'est bien le &nbsp; enfin forcer un contenu véritable au <li> qui permet de le faire se comporter normalement.

Et ce n'est pas tant le simple fait de mettre un height: au <li> qui cause ce problème, c'est le fait de donner un hasLayout au <li> (bon ok, en donnant un height; tu donne le hasLayout, mais ghost le donne aussi avec son height:1% et c'est ça qui trigger le bug d'affichage étrange).
IE6 a des comportement étranges avec les listes de toutes façons, et là il semble que lui trigger le hasLayout sur un élément qu'il juge vide, lui fait perdre les pédales au niveau des dimensions. Et en remettant un "vrai" élément dans le li, on le laisse gérer les dimensions "normalement" et tout rentre dans l'ordre

Bien joué ghost en tout cas Smiley smile
Sujet clos
Aller à