Hallöchen!
Ich habe hier ein seltsames Phänomen, für das ich keine logische Erklärung finden kann:
Die DIVs sollen eigentlich alle direkt untereinander kleben, dank margin.
Das klappt auch, außer wenn zu Beginn der DIVs ein bestimmtes (absatzerzeugendes?) Element steht.
Genaugenommen stimmt der margin der DIVs auch... das sieht man daran, dass sich die Höhe des DIVs nicht ändert, wenn man einen Rahmen drum macht. Gleichzeitig hat dann auch das ganze div die richtige Hintergrundfarbe...
Wie im folgenden Beispiel zu sehen, habe ich zwei Hacks gefunden:
- margin-top für Kindelement
- border für DIV
beide finde ich aber nicht sehr zufriedenstellend.
Kann mir vielleicht jemand dieses Verhalten erklären?
Danke schon mal für die Mühe :)
(Getestet mit Firefox, Konqueror, Opera. Konqueror und Opera stellen zumindest das oberste DIV wie erwartet dar.)
<html>
<head><title></title></head>
<body style="background-color:#93efef; padding:0px; margin:0px;">
<div style="background-color:#ffffff; margin:0px 170px; padding:0px 5px 50px 5px; vertical-align:top;"><p>test</p></div>
<div style="background-color:#ffffff; margin:0px 170px; padding:0px 5px 50px 5px; vertical-align:top;"><h1>Test</h1></div>
<div style="background-color:#ffffff; margin:0px 170px; padding:0px 5px 50px 5px; vertical-align:top;">test</div>
<div style="background-color:#ffffff; margin:0px 170px; padding:0px 5px 50px 5px; vertical-align:top; border:thin solid red"><h1>Test</h1></div>
<div style="background-color:#ffffff; margin:0px 170px; padding:0px 5px 50px 5px; vertical-align:top;"><h1 style="margin-top:0px">Test</h1></div>
</body>
</html>