28172 sujets

CSS et mise en forme, CSS3

[Resolu] FF ajoute des espaces entre les blocs-Pb de fusion des marges

Bonjour!
Bonne année et tous mes meilleurs vœux. Que votre code se compile toujours en 2009 ^^

J'ai un petit problème de positionnement des éléments.
Je me créé quelques gabarits pour des projets futurs et firefox m'ajoute des espaces entre certains blocs alors qu'ie m'interprete tout comme je le souhaite.

Je ne comprends pas, surtout qu'entre certains blocs firefox me fait tout bien ...
J'en perds mon latin.

Voici mon code (pas bien compliqué mais qui ne s'affiche pas comme je le souhaite ...)

<body>
<div id="conteneur">

	<div id="logo">
		<p>Logo</p>
	</div> <!-- fin div logo -->
	
	<div id="menu">
		<p>Menu</p>
	</div> <!-- fin div menu -->
	
	<div id="header_panel">
		<p>Header Panel</p>
	</div> <!-- fin div header panel -->
	
	<div id="sous_menu">
		<p>Sous menu</p>
	</div> <!-- fin div sous-menu -->
	
	<div id="corps">
		<p>Corps</p>
	</div> <!-- fin div corps -->

</div> <!-- fin div conteneur -->
</body>



body {font-size: .7em; font-family: verdana, arial, helvetica, sans-serif;}
div#conteneur {width: 800px; margin: auto; color: #fff;}

div#logo {
	height: 50px;
	width: 150px;
	background: #ccc;
	}

div#menu {
	height: 30px;
	margin-top: 5px;
	background: #ccc;
	}
	
div#header_panel {
	height: 100px;
	margin-top: 5px;
	background: #ccc;
	}
	
div#sous_menu {
	width: 150px;
	height: 500px;
	float: left;
	margin-top: 5px;
	background: #ccc;
	}
	
div#corps {
	width: 649px;
	height: 500px;
	float: left;
	margin-top: 5px;
	border-left: gray solid 1px;
	background: #ccc;
	}


Et ce code me donne : http://public.cyg.fr/pb%20alsacreations/ie_gabarit4.png avec internet exporer (un espacement égale entre chaque bloc)
et http://public.cyg.fr/pb%20alsacreations/firefox_gabarit4.png ceci avec firefox. L'espacement est inégal en dépit du code entre les blocs "logo", "menu" et "header panel" ... Le code indique qu'il faudrait un espacement de 5px entre chaque bloc et il n'en est rien ... l'espacement de 5 pixels s'essfectue seulement entre le bloc "header panel" et le "corps"

Je ne comprends rien. Le code est simple, clair, rien de compliqué, et pourtant ça ne marche pas ...

Merci d'éclairer ma lanterne sur le détail que je n'ai pas vu! Smiley smile
Bonne journée

PS: pour voir la page en action : http://public.cyg.fr/pb%20alsacreations/index.html
et le css http://public.cyg.fr/pb%20alsacreations/main.css
Modifié par Cygdar (17 Jan 2009 - 15:48)
Salut,

Oui c'est un peu compliqué...

Tu peux voir du coté de la notion de fusion des marges, ça explique assez bien le rendu firefox: si la marge du premier <p> enfant est supérieure à celle d'un bloc <div> qui le contient alors c'est la marge de ce <p> qui va s'imposer.

Tu peux aussi regarder du coté de la notion de haslayout pour IE qui vient fiche un sacré bazard là dedans, tous tes bloc <div> sont dimensionnés donc ils ont tous le haslayout.

A titre de test rajoute à tous tes div le couple propriété/valeur:

overflow:hidden;


Et tu verras que du point de vue des marges externes tout va se ressembler un peu (sur ton rendu actuel IE).

De ce point de vue la notion à considérer est celle de "contexte de formatage" qui induit l'annihilation de la fusion des marges.

Mais bon il reste encore des différences sur les marges internes... Mais là, à part la notion de TROLL (Du genre: "Avec IE même quand tout est réglé Ya encore des problèmes") je ne vois pas trop quoi proposer...
Modifié par 4/3 (17 Jan 2009 - 15:00)
Notons que la fusion des marges entre un conteneur et ses premier et dernier enfant ça se gère aussi très simplement avec un padding: 1px 0; sur le conteneur.
Merci!
C'était effectivement un problème de fusion des marges.
Je ne connaissais pas ce problème.

La question est réglé et en plus j'ai appris quelque chose. La vie est belle Smiley ravi

Merci Florent V. et 4/3
Florent V. a écrit :
Notons que la fusion des marges entre un conteneur et ses premier et dernier enfant ça se gère aussi très simplement avec un padding: 1px 0; sur le conteneur.


En l'occurence c'est loin d'être aussi simple

. Cas général: le margin-top des div ne joue pas si margin-top du 1er enfant (p) supérieur et jeu de fusion.

. Si fusion annihilée: padding, border, contexte de formatage (hors IE) alors margin-top du 1er enfant compris dans le conteneur.
Tout à fait vérifiable dans l'exemple de Cygdar: on aurait l'impression que le div ont un padding top visible du fait du gris de background.
Et celà vaut pour tous les navigateurs.

. Mais si IE + haslayout alors margin-top du 1er enfant disparu, ni fusion, ni insertion (padding sur conteneur ou pas) et qu'il s'agisse d'IE 6 ou 7
Modifié par 4/3 (17 Jan 2009 - 16:42)
Sujet clos
Aller à