Closed
Bug 306312
Opened 20 years ago
Closed 20 years ago
background colour and background image of parent element (e.g. DIV) do not apply to the whole element if margin-top and margin-bottom are specified for child element
Categories
(Firefox :: General, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: fotang, Unassigned)
References
()
Details
Attachments
(1 file)
|
297 bytes,
text/html
|
Details |
User-Agent: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8b3) Gecko/20050712 Firefox/1.0+
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8b3) Gecko/20050712 Firefox/1.0+
In the following code, the area between the 2 HR's should be filled with a red
colour. In firefox deer park alpha 2 (1.0.6), this is not the case: the areas
covered by margin-top and margin-bottom do not have the red colour.
<div style="background-color:red;">
<p style="margin-top:5ex;margin-bottom:5ex;">
shouldn't there be a red background, extending from 5ex above to 5ex below
this sentence (between the 2 hr's)? works so in IE 6.
</p>
</div>
Reproducible: Always
problem (?) occurs at least on Linux and Windows XP.
|
Reporter | |
Comment 1•20 years ago
|
||
To make the problem clearer, we put the <DIV> between two horizonal rules. I
forget to add the hr's in the code fragment that I posted.
|
||
Comment 2•20 years ago
|
||
I would not expect there to be a red background between the paragraph and hr's
and IE does not show there to be one in my tests. Backgrounds of elements cover
the element content and padding area, not the margin area. Margins show the
background of the containing block, in this case the page body.
Please when filing bugs post testcases as attachments to the bug, it makes
evaluating them much easier and ensures everyone is looking at the same code.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
|
|
Reporter | |
Comment 3•20 years ago
|
||
The link that I posted should have shown the problem. Anyway, I will post the code.
I am looking at the code/link on IE 6, firefox 1.0.6 (WinXP),and firefox 1.0.6
(linux, vmware). The behaviours are clearly different: IE is rendering as you
describe (colouring the padding area); firefox is not.
<html>
<head><title>testing css margin-top and -bottom</title>
</head>
<body>
<hr/>
<div style="background-color:red;width:75%;">
<p style="margin-top:5ex;margin-bottom:5ex;">
red background, extending from 5ex above to 5ex below th
is sentence?
</p>
</div>
<hr/>
</body>
</html>
|
|
||
Comment 4•20 years ago
|
||
Attaching reporters testcase.
|
|
||
Comment 5•20 years ago
|
||
Having looked again my initial response was slightly incorrect. Whats happening
here is that the margin on the paragraph is collapsing with the margin of the
div. This is really a dupe of bug 301942 but I'll just leave this as invalid to
avoid the spam.
You need to log in
before you can comment on or make changes to this bug.
Description
•