Hallo,
ich hab mal wieder ein Problem, das ich überhaupt nicht verstehe... und zwar möchte ich auf meiner Seite einen farbigen Header haben, der über die ganze Bildschirmbreite geht und oben bündig abschließt (so ähnlich wie bei der
DP). Dazu habe ich natürlich erst mal die Margins und Paddings der diversien <div>s und des <body> auf 0 gesetzt.
Nun befindet sich aber in dem Header noch eine Überschrift (<h1>-Tag), welche einen Margin > 0 hat, da sie natürlich nicht direkt am Rand kleben soll.
Nun führt das eigenartigerweise dazu, dass die Seite so gerendert wird, als ob der Header, nicht die Überschrift, das Margin > 0 hätte.
Um das ganze mal etwas anschaulicher zu machen, hier (verkürzt) der Code:
XML-Code:
<
html>
<head>...<head>
<body>
<div id="wrapper">
<div id="header">
<h1>Test</h1>
</div>
<div id="main">
...
</div>
</div>
</body>
</
html>
Code:
body, #wrapper, #header, #main {
margin: 0px;
padding: 0px;
}
#header { background: red; }
#wrapper { background: blue; }
#main { background: green; }
/* Das einzige Element mit margin != 0: */
h1 {
margin-top: 50px;
margin-bottom: 50px;
}
So sieht das Ergebnis aus (man beachte den großen weißen Abstand oben und darunter den blauen Bereich – beides sollte nicht da sein):
Aussehen soll (und müsste es nach meiner Logik) aber so:
Ich habe dieses seltsame Verhalten sowohl in der Alpha des Firefox 6 als auch im IE9 festgestellt.
Live-Demo gibts hier (die gleiche Datei gibt’s auch noch mal zusätzlich im Anhang)
Danke im Voraus,
ich bin gerade ziemlich ratlos...