Closed
Bug 459207
Opened 17 years ago
Closed 17 years ago
Having a border or not determines location of a div
Categories
(Firefox :: General, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: mattias, Unassigned)
Details
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; WOW64; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.04506; Media Center PC 5.0; .NET CLR 3.5.21022; .NET CLR 1.1.4322)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; sv-SE; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1
Having a CSS with the following doesn't put a <body><div class="container">foobar</div></body> page with the div at the corner of the body:
body {
background-color:#444;
text-align:center;
margin:0;
padding:0;
}
div.container {
width:950px;
text-align:left;
margin:0 auto;
background-color:#fff;
}
But if you add border:1px solid red; to the div.container it gets the right position at the corner of the page.
Reproducible: Sometimes
Steps to Reproduce:
1. Create a page with the given CSS (without the border)
2. Have only <div class="container">foobar</div> within the <body>-tag
3. View the page
Actual Results:
The div doesn't get its margin to 0 and has a margin towards the body
Expected Results:
Div is supposed to corner with the body start
|
||
Comment 1•17 years ago
|
||
I suppose you are talking about the top-margin of the div.
With the sample code you provided in comment 0, there is no gap at the top of the page, even without a border.
However, I suspect what you inserted into the div is a block level element such as a <p> or a <h1>. Those elements have a top margin by default, and unless you have zero'ed out that top margin, it will collapse-through the div. That is the correct and expected behaviour in CSS 2.1
http://www.w3.org/TR/CSS21/box.html#collapsing-margins,
esp the 5th bullet in the list is relevant.
Adding a border on the div will prevent the margin-collapse-through.
If your problem is not in the above, please provide a test case illustrating your issue. Otherwise this bug is invalid.
|
Reporter | |
Comment 2•17 years ago
|
||
This is what I suppose is a bug:
http://www.xertoz.se/fxbug/margin.html
And this is what happens if you simply add a border..
http://www.xertoz.se/fxbug/nomargin.html
Are you telling me this is what the expected behaviour is?
|
|
||
Comment 3•17 years ago
|
||
(In reply to comment #2)
> This is what I suppose is a bug:
> http://www.xertoz.se/fxbug/margin.html
That is what happens with margin-collapse-through. The margin-top on the <p> 'escapes' out of the div. That is the correct behaviour, see the link in comment 1. WebKit (Safari, Chrome) and Opera all behave the same way. IE 8B2, when in standards mode, also behaves like that.
Older versions of IE fail, because you applied a width to the <div> which sets 'haslayout' to true and prevents margin-collapsing.
> And this is what happens if you simply add a border..
> http://www.xertoz.se/fxbug/nomargin.html
Yes, in this case the margin-top on the <p> is contained within the <div>, it cannot collapse through due to the border.
> Are you telling me this is what the expected behaviour is?
Yes. Add to your stylesheet
p {margin-top:0;}
and see what happens.
--> Invalid
Status: UNCONFIRMED → RESOLVED
Closed: 17 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•