28173 sujets

CSS et mise en forme, CSS3

Salut à tous,
voilà j'aimerais vous évoquer un petit pb auquel je suis confronté.

Voici un bout de code:

CSS :

body,div,ul,li,h1,a,img{margin:0px;padding:0px;border:0px;}
ul,li{list-style:none;}

/*************************************************************/

#global_home{
	background:url(../img/bkg_home.jpg) top left no-repeat;
	width:597px;
	height:464px;
	margin-left:auto;
	margin-right:auto;
	font-family:Arial, Helvetica, sans-serif;
}
	#global_home h1{color:#0fa4e3;font-weight:bold;font-size:24px;margin:52px 0px 0px 27px;}


HTML :

<body>

	<div id="global_home">
		<h1>Votre avis nous intéresse !</h1>
		
	</div>
	
</body>


Ou est le problème?
Et bien, sous Firefox et Opera (mais pas IE), le margin-top appliqué à h1 décale non pas le bloc h1 mais le bloc parent c'est à dire le div #global_home! Smiley ohwell
Alors il est possible de passer outre ce "bogue" en appliquant un padding-top directement à #global_home, mais ce pose la question du pourquoi du comment de ce décalage?!
Donc si quelqu'un connait la réponse je suis preneur!

Merci d'avance! Smiley smile
Modifié par zempa (21 Jan 2008 - 11:08)