nicht angemeldet
background-color und Geckos
Hi,
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.
Soll das so sein, oder ist das ein Bug?
Michi
-
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
-
Hallo, Axel,
<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.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.
Ja, und? Das ist soweit logisch.
Die Hintergrundfarbe wird an seine Kind-Elemente weitergereicht.
Das p-Element samt margins hat a sollte das Elternelement vergrößern und somit sollte die Hintergrundfarbe des Elternelements sichtbar sein, da das p-Element selbst transparent ist. Nach obiger Definition umfassen die hier entscheidenden Ausmaße des Elements auch die margins und somit sollten diese auch gefärbt sein, da sie nicht über das Elternelement hinauslappen können.
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.
Wieso?
Durch den Rahmen bekommt das div-Element aber eigenen Inhalt.
Häh - was bedeutet das? Was hat Rahmen mit »eigenem Inhalt« zu tun? Kannst du eventuell den relevanten Standard-Auszug posten?
Nun wirkt sich die Hintergrundfarbe auf den div-Bereich aus.
Sie wirkt sich auch vorher darauf aus, aber eben nur teilweise, obwohl das Element offensichtlich dieselbe Höhe hat.
<div style="background-color:#efeff7;">
<p style="padding:100px;">Inhalt</p>
</div>Wieso exakt ist es bei padding anders?
Grüße,
Mathias-
Hallo Mathias,
Das p-Element samt margins hat a sollte das Elternelement vergrößern und somit sollte die Hintergrundfarbe des Elternelements sichtbar sein, da das p-Element selbst transparent ist. Nach obiger Definition umfassen die hier entscheidenden Ausmaße des Elements auch die margins und somit sollten diese auch gefärbt sein, da sie nicht über das Elternelement hinauslappen können.
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.
Wieso?
Durch den Rahmen bekommt das div-Element aber eigenen Inhalt.
Häh - was bedeutet das? Was hat Rahmen mit »eigenem Inhalt« zu tun? Kannst du eventuell den relevanten Standard-Auszug posten?Explizit steht das nirgends, aber folgendes scheint mir logisch:
Das div ist _nicht_ automatisch eine Box laut http://www.w3.org/TR/REC-CSS2/box.html. Es ist ein Block-Level-Gruppierungselement. Erst durch eigenen Inline-Content oder durch einen Border oder durch ein Padding wird es zu einer Box. Solange es keine Box ist, wird der Margin seiner Box-Kindelemente transparent dargestellt. (Margin area: Margins are always transparent.)<div style="background-color:#efeff7;">
<p style="padding:100px;">Inhalt</p>
</div>Wieso exakt ist es bei padding anders?
Weil Padding innerhalb des p-Elements liegt, Margin aber außerhalb? Meiner Ansicht nach macht ein Box-Kindelement mit Margin aus einem div keine Box (siehe oben). Der Hintergrund im Beispiel ist der Hintergrund der p-Box, nicht des divs.
Einige weitere Beispiele, die meine Ansicht zu stützen scheinen ;-))
<hr />
<div style="background-color:#00AEAD;"><p style="margin:50px; border:1px solid black;">Inhalt</p></div>
<hr />
<div style="background-color:#00AEAD;"><p style="padding:50px; border:1px solid black;">Inhalt</p></div>
<hr />
<div style="background-color:#00AEAD;">Inhalt vor p<p style="margin:50px; border:1px solid black;">Inhalt von p</p>Inhalt nach p</div>
<hr />
<div style="background-color:#00AEAD;"><img src="#" width="1" height="1" border="0" alt=""><p style="margin:50px; border:1px solid black;">Inhalt von p</p></div>
<hr />
<div style="background-color:#00AEAD; padding:1px;"><p style="margin:50px; border:1px solid black;">Inhalt von p</p></div>
<hr />
<div style="background-color:#00AEAD; border:1px solid black;"><p style="margin:50px; border:1px solid black;">Inhalt von p</p></div>
<hr />viele Grüße
Axel
-
Hallo, Axel,
Durch den Rahmen bekommt das div-Element aber eigenen Inhalt.
Häh - was bedeutet das? Was hat Rahmen mit »eigenem Inhalt« zu tun? Kannst du eventuell den relevanten Standard-Auszug posten?
Explizit steht das nirgends, aber folgendes scheint mir logisch:
Das div ist _nicht_ automatisch eine Box laut http://www.w3.org/TR/REC-CSS2/box.html. Es ist ein Block-Level-Gruppierungselement.Wo steht das genau geschrieben (das Dokument ist umfangreich); und was bedeutet das?
Erst durch eigenen Inline-Content oder durch einen Border oder durch ein Padding wird es zu einer Box.
Das kann ich nicht nachvollziehen. Selbst wenn direkter Inline-Inhalt vorhanden ist, welcher eine anonyme Box bildet, werden die margins des folgenden Blockelements nur teilweise angezeigt - wie dein Beispiel auch zeigt.
Solange es keine Box ist, wird der Margin seiner Box-Kindelemente transparent dargestellt.
Ja, aber auch nur teilweise, es gibt folglich keinen Zustand »ist Box« oder »ist nicht Box«, welcher zur Erklärung herangezogen werden kann. Wenn border und padding des div-Elements gegeben sind, trifft deine Aussage zu, aber warum?
Wieso exakt ist es bei padding anders?
Weil Padding innerhalb des p-Elements liegt, Margin aber außerhalb?
Worauf willst du hinaus? Die margins des p-Elements sollten die content edge (beziehungsweise die nicht vorhandene padding edge, welche mit der content edge übereinstimmt) des div-Containerblocks vergrößern. Und warum dies nicht der Fall ist, ist mir bis jetzt noch nicht klar geworden.
Meiner Ansicht nach macht ein Box-Kindelement mit Margin aus einem div keine Box (siehe oben).
Das kann ich dem Standard nicht entnehmen, bitte zeige es mir... Vor allem ist mir die Unterscheidung »ist Box« beziehungsweise »ist nicht Box« noch nie über den Weg gelaufen.
Der Hintergrund im Beispiel ist der Hintergrund der p-Box, nicht des divs.
Das ist mir bewusst.
Einige weitere Beispiele, die meine Ansicht zu stützen scheinen ;-)) [...]
Ja, das alles scheint einer Logik zu folgen, was ich auch nicht bezweifeln wollte. Dennoch wurde meine Frage, wo dieses Verhalten explizit definiert beziehungsweise vorgeschrieben ist, nicht beantwortet.
Möglich wäre vielleicht: »If it has block-level children, it is the distance from the top border-edge of the topmost block-level child box, to the bottom border-edge of the bottommost block-level child box« (http://www.w3.org/TR/REC-CSS2/visudet.html#q17). Somit kann die content height des Containerelement nur so hoch sein wie die border edge des p-Elements - aber was ist mit den margins des p-Elements, welche außerhalb der border edge liegen, wieso wirken sie über die content edge des Containers hinaus...? Nein, das kann nicht sein.
Grüße,
Mathias-
Hallo Mathias,
Das div ist _nicht_ automatisch eine Box laut http://www.w3.org/TR/REC-CSS2/box.html. Es ist ein Block-Level-Gruppierungselement.
Wo steht das genau geschrieben (das Dokument ist umfangreich); und was bedeutet das?Nein ich meinte nicht, dass das dort steht, sondern: Es sieht so aus als wäre ein div nicht immer eine Box, so wie die dort beschriebenen Boxen.
Erst durch eigenen Inline-Content oder durch einen Border oder durch ein Padding wird es zu einer Box.
Das kann ich nicht nachvollziehen. Selbst wenn direkter Inline-Inhalt vorhanden ist, welcher eine anonyme Box bildet, werden die margins des folgenden Blockelements nur teilweise angezeigt - wie dein Beispiel auch zeigt.
Du meinst das Beispiel mit dem Image? Angezeigt wird der Margin vom p schon, nur in der Höhe nicht mit der Hintergrundfarbe des divs. In der Breite dagegen schon. Wenn nach dem p noch ein Inline-Inhalt steht, ist die Box vollständig.
Möglich wäre vielleicht: »If it has block-level children, it is the distance from the top border-edge of the topmost block-level child box, to the bottom border-edge of the bottommost block-level child box« (http://www.w3.org/TR/REC-CSS2/visudet.html#q17). Somit kann die content height des Containerelement nur so hoch sein wie die border edge des p-Elements - aber was ist mit den margins des p-Elements, welche außerhalb der border edge liegen, wieso wirken sie über die content edge des Containers hinaus...? Nein, das kann nicht sein.
Doch, genau das steht doch da. Hat ein Block-level-Element nur Block-level-Children, so ist seine Größe so groß, wie die (mögliche)Rahmengröße des Kindelementes. Der Margin wird ja üblicherweise nicht mit umrahmt. Inline-Inhalte bilden anonymous-boxen. http://www.w3.org/TR/REC-CSS2/visuren.html#anonymous-block-level Dadurch vergrößert sich die umgebende Box auf die (mögliche) Rahmengröße von anonymous-box + Block-level-Kind.
<div style="background-color:#00AEAD;">
Inhalt vor p ist anonymous-box 1
<p style="margin:50px; border:1px solid black;">Inhalt von p</p>
Inhalt nach p ist anonymous-box 2
</div>Soweit entspricht das, was wir sehen, erstmal dem Standard. Es _ist_ also offensichtlich so, dass der Margin eines Block-level-Elementes außerhalb seines umgebenden Block-level-Elements stehen kann. Sonst würde nämlich die Regel "If it has block-level children, it(the height) is the distance from the top border-edge of the topmost block-level child box, to the bottom border-edge of the bottommost block-level child box." verletzt, da Margin außerhalb der border-edges ist.
Komisch ist allerdings, dass das Setzen eines Rahmens oder eines Paddings um das umgebende Block-level-Element ausreicht, um diese Regel zu brechen. Offensichtlich haben hier alle Rendering-Engines der Browser einen ähnlichen, leicht falschen, Programmalgorithmus.
viele Grüße
Axel
-
Hallo Axel,
Möglich wäre vielleicht: »If it has block-level children, it is the distance from the top border-edge of the topmost block-level child box, to the bottom border-edge of the bottommost block-level child box« (http://www.w3.org/TR/REC-CSS2/visudet.html#q17). Somit kann die content height des Containerelement nur so hoch sein wie die border edge des p-Elements - aber was ist mit den margins des p-Elements, welche außerhalb der border edge liegen, wieso wirken sie über die content edge des Containers hinaus...? Nein, das kann nicht sein.
Doch, genau das steht doch da. Hat ein Block-level-Element nur Block-level-Children, so ist seine Größe so groß, wie die (mögliche)Rahmengröße des Kindelementes. Der Margin wird ja üblicherweise nicht mit umrahmt. [...]
Soweit entspricht das, was wir sehen, erstmal dem Standard. Es _ist_ also offensichtlich so, dass der Margin eines Block-level-Elementes außerhalb seines umgebenden Block-level-Elements stehen kann.
Ja, das erscheint mir aber reichlich sinnfrei.
Sonst würde nämlich die Regel "If it has block-level children, it(the height) is the distance from the top border-edge of the topmost block-level child box, to the bottom border-edge of the bottommost block-level child box." verletzt, da Margin außerhalb der border-edges ist.
Genau. Exakt darum ging es mir und aus dem Grund verstehe ich die Specs nicht.
Komisch ist allerdings, dass das Setzen eines Rahmens oder eines Paddings um das umgebende Block-level-Element ausreicht, um diese Regel zu brechen. Offensichtlich haben hier alle Rendering-Engines der Browser einen ähnlichen, leicht falschen, Programmalgorithmus.
Ich kann es mir auch nur durch Spekulationen erklären Ich denke jedoch, dass es eher eine Regel als ein weit verbreiteter Fehler ist, denn alle Browser zeigen wahrscheinlich nicht ohne Grund dasselbe Verhalten - aber dies ist natürlich auch nur eine Vermutung anhand eines Indizes.
Grüße,
Mathias
-
-
-
-
-