H1 qui déborde d'un DIV ? (Fusion des marges)

**Johnbob** · 18/05/2007, 14h09

Bonjour

Connaissez-vous ce petit bug de Firefox:

Voilà mon code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	<body>
		<div id="mainDiv">
			<div id="divHeader">
				<h1>Test</h1>
			</div>
			<div id="divMenu">
 
			</div>
			<div id="divContent">
 
			</div>
			<div id="divFooter">
 
			</div>
		</div>
	</body>

Mon code CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
			body {
				font-family:"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;
				margin:0;
				padding:0;
			}
			h1 {
				font-size:15px;
				color:#F66;
				margin:5px;
				padding:0;
			}
			div#mainDiv {
				width:700px;
				border-left:solid 1px #BBB;
				border-right:solid 1px #BBB;
				background:#F8F8F8;
				margin:0 auto;
			}
			div#divHeader {
				height:50px;
				border-bottom:solid 1px #DDD;
			}
			div#divMenu {
				height:20px;
				line-height:20px;
				border-bottom:solid 1px #DDD;
			}

Et le bug: il y a un espace entre le haut de ma page et le div principal (en gris très pâle). Ce bug n'apparait plus si j'enlève le h1 et n'apparaît jamais avec IE.

**Candygirl** · 18/05/2007, 14h17

Il ne s'agit pas d'un bug mais de la fusion des marges qui est effective dans certains cas comme tu pourras le lire dans les recommandations css2 du w3c.

D'ailleurs tu constateras qu'opera réagit comme firefox

**Johnbob** · 18/05/2007, 14h26

Merci beaucoup ! (tant pour la rapidité que pour la qualité de la réponse)

J'ai donc empêché la fusion des marges en ajoutant la propriété "position:fixed;" à mon élément H1, il y a peut-être une meilleure méthode ?

Encore merci

**Candygirl** · 18/05/2007, 14h52

Envoyé par Jung

J'ai donc empêché la fusion des marges en ajoutant la propriété "position:fixed;" à mon élément H1, il y a peut-être une meilleure méthode ?

Le positionnement fixed modifie quand même de manière importante le comportement de ton h1 sur ta page donc je ne pense pas que ce soit une bonne solution, à moins que tu ne souhaites vraiement qu'il soit en fixed... ?

Suivant la réponse que je t'ai donné, en relisant ma source, j'ai été étonnée que le position:relative soit donné comme solution, par sa simplicité et parce que je ne l'avais jamais utilisé dans ce contexte. Ce positionnement aurait été bien plus approprié. J'ai testé pour voir avant de te le conseiller et... cela ne fonctionne pas

Du coup, je suis allée consulter la révision css2.1 sur la question qui comporte effectivement d'importantes modifications et précisions (j'ai pour habitude de donner la css2.0 en lien car je ne connais pas de traduction française pour le working draft 2.1). Dans cette version, il n'est plus question de position relative.

En gros jusqu'à maintenant, pour éviter ce problème, je jouais avec les padding/margin/border. En donnant un padding ou border au conteneur la fusion n'aura pas lieu. En remplaçant le margin-top de ton h1 par un padding le problème ne se posera plus.

Autrement je te laisse décortiquer plus en détail si tu arrives à quelque chose en suivant ceci:

Envoyé par w3c

The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

A suivre le lien pour le "no clearance" qui pourrait, peut-être, apporter une autre solution.

La question m'intéresse grandement mais je n'ai plus le temps de m'y consacrer maintenant. Bonne chance

EDIT: Dans mes tests rapides concernant le "no clearance" et donc les propriétés créant un nouveau contexte de formatage j'avais attribué les propriétés au h1 au lieu du conteneur et je m'étonnais que cela ne fonctionne pas

Donc, après tests corrigés, un simple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
div {
  overflow:hidden;
}

devrait faire l'affaire

(ou tout autre propriété proposée dans le lien ci-dessus)

Edit2: J'oubliais que sur IE6, la propriété overflow n'induit pas de nouveau contexte de formatage. On peut alors lui donner le layout pour le remplacer, par exemple en ajoutant un width de 100% ou à voir selon le contexte.

**Johnbob** · 18/05/2007, 15h30

Oui mon premier réflexe a été de mettre "position:relative;" à mon H1 mais ça ne marche pas en effet.

Le "overflow:hidden;" comme propriété du div conteneur résoud le problème (sous FF et sous IE)... J'ignore pourquoi IE me donne le résultat attendu mais je ne vais pas m'en plaindre

H1 qui déborde d'un DIV ? (Fusion des marges)

CSS

Discussions similaires

Partager

Partager