firefox bug??

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

firefox bug??

Post 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?? 8O

looks like a bug to me... but maybe it is something i don't know about 8O ?
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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.
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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... :?
theda
Forum Contributor
Posts: 332
Joined: Sat Feb 19, 2005 8:35 am
Location: USA

Post 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
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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 8O
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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..
User avatar
wwwapu
Forum Contributor
Posts: 197
Joined: Wed Apr 07, 2004 11:57 am
Location: Turku, Finland

Post by wwwapu »

This is very strange. Absolutely the first time I cannot but think IE is correct 8O

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?
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post by newmember »

feyd,
even if i write some text inside d3 still no top margin...
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

wwwapu wrote: 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.
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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

it gets a top margin for me... 8O


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.
User avatar
wwwapu
Forum Contributor
Posts: 197
Joined: Wed Apr 07, 2004 11:57 am
Location: Turku, Finland

Post by wwwapu »

Roja wrote: First, this is actually a vertical margin - up and down.
Hooray! :D 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>
User avatar
newmember
Forum Contributor
Posts: 252
Joined: Fri Apr 02, 2004 12:36 pm

Post 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"
Post Reply