28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je vous expose un problème CSS des plus basiques. Pour ma part, il me semble logique de dire que cette intérpretation est fausse. Mais je tenais à en faire part tellement j'ai été étonné de voir le résulat (ainsi que mes collégues de boulot). Voici donc une page HTML des plus basiques :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div id="conteneur">
        <div id="haut">
            <div id="titrepage">Les dernieres actualités</div>
        </div>
    </div>
</body>
</html>


Et voici le CSS qui va avec :

body {
	margin: 0px; 
	padding: 0px;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;	
	
}

#conteneur { 
	width:955px ;
	margin-left: auto;
	margin-right: auto;
	text-align: left;	
}

#haut{
	background-color:Green;
	height:747px;
	width:955px;
}

#titrepage{
	font-size:18px;
	[b]margin-top:100px;[/b]
}


Voici un aperçu du rendu sous Internet Exlorer (6,7)
http://img132.imageshack.us/img132/3250/72959370fp2.gif

Rendu sous les autres navigateurs (Testé : chrome, FF, Opera, Safari)
http://img231.imageshack.us/img231/1962/61637964oy7.gif

Des explications? Pour ma part, j'estime que le rendu Internet Explorer est plus cohérent.

Une <div> possède un background. Celui-ci s'applique sans prendre en compte les éléments fils. Ici, il se trouve que sous un autre navigateur, le fait de mettre un "margin-top" à la <div> fille décale de cette valeur le background de la <div> mère.

D'avance, merci.
Modifié par BatMen (28 Jan 2009 - 11:09)
Merci beaucoup. J'ai ma réponse. Il faut donc faire avec. Bug, pas bug? Logique selon vous? Peu importe, on n'y peu rien Smiley smile