[Résolu] Problème d'application avec MS Haslayout

Bonjour à tous,
Suite à ma lecture de l'article sur La fusion des marges, j'ai essayé de le mettre en pratique et je ne pige pas tout.
Voici ma structure j'ai une boîte <div> contenant des <p>.
Voici les CSS :

.conteneur {
	background: #FFC;
	margin: 10px;
}
.enfant {
	background: #6FC;
	margin: 20px;
}

Voici le HTML

<div class="conteneur">
  <p class="enfant">Paragraphe 1</p>
  <p class="enfant">Paragraphe 2</p>
  <p class="enfant">Paragraphe 3</p>
</div>

L'affichage est correcte dans FF et IE : la marge verticale haute du premier élément enfant <p> et la marge verticale basse du dernier enfant <p> fusionnent bien avec les marges haute et basse du conteneur <div>.
Dès que je mets une largeur à mon conteneur :

.conteneur {
	background: #FFC;
	margin: 10px;
	width: 500px;
}

Dans FF, tout reste identique, mais dans IE les marges hautes et basses ne fusionnent pas.
Je me dis que c'est le fameux HasLayout de l'article. J'indique donc la propriété propriétaire MS zoom à mon conteneur et à mes paragraphes :

.conteneur {
	background: #FFC;
	margin: 10px;
	width: 500px;
	zoom: 1;
}
.enfant {
	background: #6FC;
	margin: 20px;
	zoom: 1;
}

Rien ne change dans IE : les marges ne fusionnent toujours pas !

Qu'est ce que je n'ai pas compris ?
Merci de votre aide
Modifié par krakkos (28 May 2009 - 13:55)

Salut,

lorsque tu renseignes une largeur (width) cela confère le layout et empêche la fusion des marges.

lorsque tu renseignes zoom: 1 cela confère le layout et empêche la fusion des marges.

Merci pour la précision sur l'utilisation du width et/ou du zoom sur le Haslayout.

Alors ma question est pourquoi lorsque j'indique une largeur il y a fusion des marges sous FF, Opera, Safari et pas sous IE ?

krakkos a écrit :
dans IE les marges hautes et basses ne fusionnent pas.
Je me dis que c'est le fameux HasLayout de l'article.

tuto a écrit :
Dans Internet Explorer 6 et 7 notamment, conférer le layout à un élément empêche la fusion des marges entre parent et enfant

Qu'est-ce que tu ne comprends pas ?

Tu as raison je me suis mal exprimé et je me suis embrouillé les méninges.

J'ai bien noté que dès que j'indique une largeur (width) ou un zoom:1; cela donne le layout à mon conteneur et dans IE cela implique que les marges ne fusionnent pas.

Ma nouvelle question est : si j'indique une largeur, comment faire dans IE pour que les marges fusionnent comme dans FF & C° ?

krakkos a écrit :
Ma nouvelle question est : si j'indique une largeur, comment faire dans IE pour que les marges fusionnent comme dans FF & C° ?

Eh bien tout ce qui a été dit avant indique que si tu as besoin de spécifier une largeur cela empêche la fusion des marges dans IE. Il suffit donc pour avoir le même rendu dans tous les navigateurs de l'empêcher partout et de la remplacer par un padding (qui justement suffit à l'interdire partout) :

.conteneur {
	background: #FFC;
	margin: 10px;
	padding: 20px 0;
	width: 500px;
}

Merci pour tout

Pour être complet, j'ai créé deux styles particuliers pour le premier et le dernier enfants, pour avoir la fusion des marges dans mon conteneur ayant une largeur. C'est OK pour tous les navigateurs

.enfantPremier {
	background: #6FC;
	margin: 0 20px 20px 20px;
}
.enfantDernier {
	background: #6FC;
	margin: 20px 20px 0 20px;
}