Page 1 of 1
firefox bug??
Posted: Sat Aug 13, 2005 1:51 pm
by newmember
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body{background-color:#f0f;}
#d1{background-color:#f00;width:500px;height:400px;}
#d2{background-color:#0f0;margin-left:100px;height:400px;}
#d3{background-color:#000;margin-right:100px;margin-top:20px;height:300px;}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3">
</div>
</div>
<div>
</body>
</html>
firefox 1.0.6
ie 6
save above code as html page and run...
on ie black div is has 20px top margin
on firefox there is no margin??
looks like a bug to me... but maybe it is something i don't know about

?
Posted: Sat Aug 13, 2005 2:25 pm
by Roja
I think there's a bug, but its in IE.
In Firefox, the margin-top is being set relative to the outer container - d1.
In IE, its being set relative to the parent (closest) container - d2.
My understanding of the css standard requires it to be as firefox is doing it.
Posted: Sat Aug 13, 2005 2:47 pm
by newmember
In Firefox, the margin-top is being set relative to the outer container - d1.
where did you read about this?
i was reading this page:
http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin
and if it so that still doesn't explain what ff is doing... there is no 20px top margin relative to d1 either
opera agrees with firefox...

Posted: Sat Aug 13, 2005 3:09 pm
by theda
This may sound useless (or probably wrong), but it may be because your stylesheet's are 'too' together...
Code: Select all
body{ background-color: #f0f; }
#d1{ background-color: #f00; width: 500px; height: 400px; }
#d2{ background-color: #0f0; margin-left: 100px; height: 400px; }
#d3{ background-color: #000; margin-right: 100px; margin-top: 20px; height: 300px; }
I'm thinking you should use a XHTML 1.0 Transitional DTD instead of HTML 4.0 Strict. It's slightly (...well that might be understating it...) newer and supports things a lot better than HTML 4.0 Strict. Try using
Code: Select all
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
My belief is that HTML 4.0 probably doesn't suppor that usage for CSS 2.0
Posted: Sat Aug 13, 2005 3:18 pm
by newmember
theda,
do you know something about what imsure was talking?
In Firefox, the margin-top is being set relative to the outer container - d1.
In IE, its being set relative to the parent (closest) container - d2.
it seems that he is right although i totaly don't get why this works this way...
odd... i wanted to move d3 div from the top edge of d2 div so i set top margin of d3 to 20px but why this margin applied instead to d1?? i just don't get it

Posted: Sat Aug 13, 2005 3:48 pm
by feyd
nothing is above d3.. so no anchor point is my guess.. If you stick a period or something in d2 you'll get d3 to nudge down..
Posted: Sat Aug 13, 2005 4:36 pm
by wwwapu
This is very strange. Absolutely the first time I cannot but think IE is correct
When reading
http://www.w3.org/TR/CSS21/box.html#collapsing-margins (Note Level 2 Revision 1) there is said just like in CSS2
In CSS 2.1, horizontal margins never collapse.
And some lines further down about adjoining margins
The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
What does those quotes above really mean? Are they a rule and an exception?
Am I only tired or can it really be that IE is right with this?
Posted: Sat Aug 13, 2005 4:52 pm
by newmember
feyd,
even if i write some text inside d3 still no top margin...
Posted: Sat Aug 13, 2005 5:20 pm
by Roja
First, this is actually a vertical margin - up and down.
wwwapu wrote:And some lines further down about adjoining margins
The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
The child has clearance. Lots of it. So its not supposed to collapse, and it doesn't.
Its pure and simple, the margin is in relation to the outermost element, not the parent. You can see it more clearly if you set the margin to 200, instead of 20. Then the whole box moves.
Thats what Opera and Firefox get right, and what IE gets wrong.
wwwapu wrote:Am I only tired or can it really be that IE is right with this?
You must be tired.
Of course, it should be noted that this is a box model problem.. a class of problems with literally dozens of documented bugs across multiple browsers - including Firefox and Opera. IE gets the box model especially wrong, just to be clear.
My suggestion? Post it as a bug at Opera or Firefox. The Firefox team especially is incredibly adept at clarifying bugs v. specifications, since many of the spec writers work on firefox.
Posted: Sat Aug 13, 2005 5:26 pm
by feyd
it gets a top margin for me...
I have to agree with Roja at this stage (not that I disagreed in the first place

), the w3 guideline seems to point to Firefox indeed being correct.
[edit] And indeed, after a quick test, if a top border is used in d2, d3 does adjust down. Firefox is definitely correctly implemented.
Posted: Sun Aug 14, 2005 3:31 am
by wwwapu
Roja wrote:
First, this is actually a vertical margin - up and down.
Hooray!

This is a relief, I was kind of scared for a moment. Now that this mixup is clear it all seems clear to me
d3 is child of d2, which is child of d1, and it does not have clearance (no float) and therefore it collapses since there is no non-empty content, padding or border.
http://www.w3.org/TR/CSS21/visuren.html#clearance
Did you notice that effect like red box having 20px top-margin? Top-margins of all three collapsed and margin was calculated according to
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero. Note. Adjoining boxes may be generated by elements that are not related as siblings or ancestors.
Horizontal margins never collapse (left-right). See code below, black box moves 50px right. Margins are relative to containing block-
Code: Select all
<style type="text/css">
body{background-color:#f0f;}
#d1{background-color:#f00;width:500px;height:400px;}
#d2{background-color:#0f0; margin-left:100px;height:400px;}
#d3{background-color:#000; margin-left: 50px; margin-right:100px;margin-top:20px;height:300px;color:#fff}
</style>
</head>
<body>
<div id="d1">This text pushes d2 and d3 downwards
<div id="d2">If this text is taken away d3 collapses with d2
<div id="d3">This text has no effect.
</div>
</div>
<div>
Posted: Sun Aug 14, 2005 7:39 am
by newmember
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body{background-color:#f0f;}
#d1{background-color:#f00;width:500px;height:400px;}
#d2{background-color:#0f0;margin-left:100px;height:400px;border-top-style:solid;border-top-color:#000;border-top-width:1px;}
#d3{background-color:#000;margin-right:100px;margin-top:20px;height:300px;}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3">
</div>
</div>
</div>
</body>
</html>
you guys right.... when i add top border to d2 then margin set directly on d3
on second thought i wish i name this thread "IE bug"