Closed
Bug 296389
Opened 20 years ago
Closed 20 years ago
border not drawn around content if positioned elements used in HTML using CSS.
Categories
(Firefox :: General, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: sadeeb, Unassigned)
Details
(Keywords: testcase)
Attachments
(1 file)
|
521 bytes,
text/html
|
Details |
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; rv:1.7.3) Gecko/20041001 Firefox/0.10.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; rv:1.7.3) Gecko/20041001 Firefox/0.10.1
The content reproduced below should lead to the border being drawn around the
entire content. Although the positioned elements are taken into account while
laying out the background of the <body> tag, the positioned elements are not
taken into account when calculating the layout of the border. Instead, we get a
single dashed line across the top of the page, that does not border the
positioned elements that are inside body (displayable root element in the web
page, I would assume).
=========== TEST CONTENT ==================
<html>
<head>
<style type="text/css">
h1.x
{
position:absolute;
left:20px;
top:250px
}
h2.y
{
position:absolute;
left:20px;
top:650px
}
.z{
position:absolute;
left:20px;
top:150px
}
.test
{
position:absolute;
left:50px;
top:1300px;
}
body { background: red; border: dotted 10px blue }
</style>
</head>
<body>
<h1 class="x">This positioned text</h1>
<h2 class="y">This positioned text</h2>
<p class="z">This positioned text </p>
<p class="test">This</p>
</body>
</html>
Reproducible: Always
Steps to Reproduce:
1. Load the page whose content is reproduced above.
Actual Results:
All we see is a dashed line across the top of the page because body has ONLY
positioned elements that are placed lower in the page. The text inside
positioned elements are all outside the border for <body>. I noticed the
background color for <body> is drawn taking into account the position of the
other elements as well.
Expected Results:
We expect to see a dashed border on the outer edge around the entire content,
including the positioned elements.
|
||
Comment 2•20 years ago
|
||
Why do expect that?
Css2.1 doesn't say it should be that way:
http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning
(In reply to comment #2)
> Why do expect that?
> Css2.1 doesn't say it should be that way:
> http://www.w3.org/TR/CSS21/visuren.html#absolute-positioning
The CSS2.1 spec only mentions that "it has no impact on later siblings".
Since the background color for body is applied until the bottom of the the last
positioned block, it shows us that the rectangle for body is extended based on
the positioned blocks. Thus, one should expect that the border would also
surround the background-color.
Please let me know your thoughts on this.
The background is special-cased in HTML, see the fourth paragraph here, the
border is _not_ special-cased:
http://www.w3.org/TR/CSS21/colors.html#q2
The first paragraph at http://www.w3.org/TR/CSS21/colors.html#q2 clearly tells
us that the "background" refers to the background of the content, padding and
border areas (of course, margins are transparent).
The 4th para tells us about the precedence of the background-color property of
<html> and <body> elements. I feel that it may have nothing to do with being
special-cased.
(In reply to comment #5)
> The 4th para tells us about the precedence of the background-color property of
> <html> and <body> elements. I feel that it may have nothing to do with being
> special-cased.
"User agents should observe the following precedence rules to fill in the
background of the _canvas_ of HTML documents . . . else use the value of the
'background' property for the BODY element."
The background property of the body doesn't just determine the colour of its own
element but of the whole window.
|
||
Comment 7•20 years ago
|
||
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b4) Gecko/20050831
Firefox/1.0+ ID:2005083106
Without comment to the validity of this bug, I can confirm that it is still
exhibited by the above nightly.
|
|
||
Comment 8•20 years ago
|
||
Upon further research, I have concluded that the behavior exhibited is expected.
The relevant portion of the CSS 2.1 spec is 9.6 and reads as follows:
"In the absolute positioning model, a box is explicitly offset with respect to
its containing block. It is removed from the normal flow entirely (it has no
impact on later siblings). An absolutely positioned box establishes a new
containing block for normal flow children and absolutely (but not fixed)
positioned descendants. However, the contents of an absolutely positioned
element do not flow around any other boxes. They may obscure the contents of
another box (or be obscured themselves), depending on the stack levels of the
overlapping boxes."
Pay attention to sentences 2 and 3. They indicate that in the example given,
the body box is actually empty because all child elements have been removed to
separate boxes.
As pointed in comment 4, the background property of the body element actually
applies to the entire canvas. This explains why the entire page is red while
the border is a single line.
I am marking this bug INVALID.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•