nicht angemeldet
Hallo,
schaut euch den folgenden Quellcode an:
<div style="background-color:#efeff7;border:1px dashed #000000;">
<p style="margin:100px;">Inhalt</p>
</div>
<br />
<div style="background-color:#efeff7;">
<p style="margin:100px;">Inhalt</p>
</div>
Die Hintergrundfarbe im ersten Layer erstreckt sich über den gesamten Bereich, im zweiten nur über das <p>-Tag.
Der einzige Unterschied zwischen beiden Layern ist, dass der zweite keinen Rahmen hat.
Aber nur bei Netscape und Mozilla.
Nö, IE5.5 macht es ach wie NS7.0 und Opera6.05.
Ich sehe zwar nicht den Sinn eines divs mit 100px Rand drumrum? Aber:
Das div-Element ist nur ein leerer Block-Level-Container. Du gibst keine Größen(Höhen) vor, also beansprucht es den Platz, den das p-Element und dessen Ränder (margin, padding) beansprucht. Die Hintergrundfarbe wird an seine Kind-Elemente weitergereicht. Die Browser sehen allerdings offensichtlich keinen Grund, den Außenrand (margin) des p-Elements mit der Hintergrundfarbe zu färben. Beim Innenrand (padding) läge die Sache schon anders.
Durch den Rahmen bekommt das div-Element aber eigenen Inhalt. Nun wirkt sich die Hintergrundfarbe auf den div-Bereich aus.
Lösungsvorschläge:
<div style="background-color:#efeff7;">
<p style="padding:100px;">Inhalt</p>
</div>
oder
<div style="background-color:#efeff7; border:1px solid #efeff7;">
<p style="margin:100px;">Inhalt</p>
</div>
viele Grüße
Axel