28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de marge pour un bloc flottant dans un autre

Bonjour,

Je rencontre le problème suivant dans le code source ci-dessous : sous IE 6, la marge gauche de blocflottegauche est beaucoup plus grande que sous IE 7 ou FFox. Quel est ce bug, et comment le contourner ? Mettre un padding-left au bloc conteneur règle le problème, mais quelle solution permet d'éviter de toucher au bloc conteneur ? Si je ne fais pas flotter le bloc, la marge est correcte, or j'ai besoin de faire flotter ce bloc.

Merci !


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title></title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	#conteneur {
		width: 500px;
		background-color: Green;
		height: 200px;
	}
	#boxflottegauche {
		background-color: Aqua;
		width: 150px;
		height: 20px;
		margin-left: 50px;
		float: left;
	}
	</style>
</head>
<body>
<div id="conteneur">
<div id="boxflottegauche"></div>
</div>
</body>
</html>

Modifié par PozNo (07 Jun 2007 - 07:36)
Bonjour,

Il s'agit du IE Doubled Float-Margin Bug, qui fait que la marge à gauche du flottant est doublée (2x50px) sous IE6.

Le correctif couramment appliqué est de déclarer le flottant comme étant en display: inline. Ça ne change rien dans l'absolu (le comportement flottant prend le pas sur le fait que l'affichage soit de type bloc ou en-ligne...), mais ça corrige le bug dans IE6.

Bonne continuation.
Sujet clos
Aller à