28172 sujets

CSS et mise en forme, CSS3

Comportement firefox différent des margin avec et sans bordure

Bonjour depuis quelques temps je remarque un comportement bizarre sous FF et j'aimerai bien avoir une solution. En faite j'ai remarqué que quand je met un margin sur un div a l'intérieur d'une autre si la div contennante n'a pas de bordure c'est elle qui prend le margin. Comme du code et des images valent mieux que des grands discours voici mon test :

Le code HTML :

<!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"> 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
</head>
<body>
<div class="contener">
	<div class="content">
	
	</div>
</div>
</body>
</html>


Premier test sans bordure :
CSS : 

div.contener{
background-color:green;
}
div.content{
width:200px;
height:200px;
background-color:red;
margin-top:100px;
}


Affichage FF :

http://img352.imageshack.us/img352/5466/withoutborderyx8.th.png

Deuxième test avec bordure :

div.contener{
background-color:green;
border:solid 3px red;
}
div.content{
width:200px;
height:200px;
background-color:red;
margin-top:100px;
}
http://img182.imageshack.us/img182/8001/withborderpx4.th.png

Si quelqu'un a une explication je suis preneur.
Modifié par petitchevalroux (25 Feb 2008 - 10:59)
Bonjour,

petitchevalroux a écrit :
Bonjour depuis quelques temps je remarque un comportement bizarre sous FF et j'aimerai bien avoir une solution.

Ce n'est pas un comportement bizarre mais une stricte application des spécifications CSS. Et ça ne concerne pas que Firefox, mais Firefox, Opera, Safari, et également Internet Explorer (même si pas systématiquement avec ce dernier, qui est un peu beugué...).

Ça s'appelle la fusion des marges. Hop:
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html
Modifié par Florent V. (25 Feb 2008 - 12:20)
@Dynexd :Le code html était un exemple sur le site sur lequel je travail les div ont un contenu.

@Florent V. : Merci de ta réponse simple claire et efficace (et surtout pour le liens ... un must have Smiley cligne ). Je trouve ce comportement débile ... mais c'est un avis personnel.
Modifié par petitchevalroux (25 Feb 2008 - 12:32)
petitchevalroux a écrit :
Je trouve ce comportement débile ... mais c'est un avis personnel.

Il est en réalité très utile dans une perspective de gestion de la mise en forme du texte. Beaucoup moins intéressant pour des blocs de mise en forme, certes, mais il suffit de le connaitre. Smiley smile
Administrateur
Bonjour,

surprenant ou contre-intuitif certainement, mais débile j'en doute Smiley cligne
Pour des paragraphes de texte, on ne veut pas un espace double entre 2 paragraphes par rapport à l'espace qui précède le 1er § et celui qui suit le dernier: c'est tout l'intérêt de la fusion des marges (c'est ce que j'ai retenu mais je peux me tromper sur sa vraie origine Smiley confused )
EDIT: et donc si ça n'existait pas, il faudrait systématiquement (en CSS 2.1) rajouter un id ou une classe sur les premier et dernier paragraphe et leur appliquer des marges différentes Smiley sweatdrop
Modifié par Felipe (25 Feb 2008 - 12:58)
Bon débile était peut être un peu fort Smiley biggol je pense que contre intuitif est tout à fait approprié Smiley cligne .

Je ne connaissais pas ce comportement je ne me ferai plus avoir maintenant grâce à vos conseils et vos explications.

Merci Felipe pour l'intéret du collapse j'y vois plus clair maintenant. Smiley eek
Modifié par petitchevalroux (25 Feb 2008 - 13:05)
Sujet clos
Aller à