28172 sujets

CSS et mise en forme, CSS3

Bug IE: répétition d'un margin-bottom après 2 éléments floatés

Bonjour,

Je suis confronté à un bug IE6 et IE7 que je n'arrive pas à identifier.

Voici un code de démo

<!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>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Bug IE</title>
		<style type="text/css" media="screen">
			body {
				background: #808080;
			}

			#wrapper {
				background: #FFF;
				border: 5px solid #000;
				overflow:hidden;
				width: 700px;
			}

			#wrapper h1{
				background: yellow;
				margin: 0 0 50px;
			}

			#box1, #box2 {
				height: 400px;
				float: left;
				width: 350px;
			}

			#box1 {
				background: green;
			}

			 #box2 {
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<h1>Lorem Ipsum</h1>
			<div id="box1">box1</div>
			<div id="box2">box2</div>
		</div>
	</body>
</html>


Le Bug: Le margin de 50px appliqué au h1 est également appliqué au div#box2
La démo en ligne


J'ai déjà trouvé différents moyens de contourner le bug mais je n'arrive pas à l'identifier.
Il ne semble pas être listé sur les sites que je connais.

Je me dis que l'un d'entre vous doit bien le connaitre et pourra m'expliquer pourquoi il se produit ou bien me donner un lien vers un site qui le documente.

Merci
Modifié par Mathieu_vd (26 Jun 2008 - 20:45)
Hello,

Joli bug, je ne connaissais pas.
On évite le bug du moment que le deuxième élément n'est pas flottant:

<!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>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Bug IE</title>
		<style type="text/css" media="screen">
		.registerToServices {
			overflow: hidden;
			width: 710px;
		}
		.registerToServices h1 {
			margin: 0 0 50px 0;
		}
		.registerToServices #action {
			float: left;
			width: 270px;
			height: 400px;
		}
		.registerToServices #servicesList {
			margin-left: 300px;
			height: 300px;
		}

		body {background: #000;}
		.registerToServices {background: #FFF;}
		.registerToServices h1 {background: yellow;}
		.registerToServices #servicesList {background: red}
		.registerToServices #action {background: green}
		</style>
	</head>
	<body>
		<div class="registerToServices">
			<h1>Lorem Ipsum</h1>
			<div id="action">box1</div>
			<div id="servicesList">box2</div>
		</div>
	</body>
</html>


PS: l'exemple est plus parlant sans le padding sur le conteneur. Smiley cligne
Merci pour ta réponse, Florent

Florent V. a écrit :
PS: l'exemple est plus parlant sans le padding sur le conteneur. Smiley cligne


En effet, j'ai édité mon premier post pour que l'exemple soit plus clair.
J'ai aussi uploadé une démo

Florent V. a écrit :
On évite le bug du moment que le deuxième élément n'est pas flottant:


Oui mais je préfère avoir les deux éléments flottant pour plus facilement intervertir les colonnes.
Et puis éviter le bug n'est pas un problème, je voulais juste savoir s'il est connu et documenté quelque part.

On peut aussi le contourner en remplaçant le margin-bottom du h1 par un margin-top sur #box1 et #box2

edit: Désolé, le fait de modifier mon code dans le post initial, rend ton code moins compréhensible pour les autres lecteurs Smiley confused
Modifié par Mathieu_vd (26 Jun 2008 - 18:18)
Sujet clos
Aller à