282462 - The margin-top of an element with with margin-top:100px and clear:both seems to be ignored

Status: RESOLVED INVALID

(Core :: Layout: Floats, defect)

Description

[Martijn Wargers (dead)]

This is a spin-off of bug 204831, comment 35.
The rendering of the testcase changed with the fix for bug 209694.
I'll attach screenshots of what Mozilla before and after the fix for bug 209694
is doing and what IE/Opera8.0b is doing.

Comment 1

[Martijn Wargers (dead)]

Attachment: moz20041125 build, before the fix

Comment 2

[Martijn Wargers (dead)]

Attachment: moz20041126, after the fix

Comment 3

[Martijn Wargers (dead)]

Attachment: Image of what IE6/Opera8.0b are doing with the testcase

I don't know, but this seems the correct rendering, not?

Comment 4

[Mats Palmgren (inactive)]

You can change the margin-top to 10000px and it won't make a difference due
to negative clearance. AFAICT, Mozilla's current rendering is correct.
See bug 275018 comment 14, 15, 16 and 21.
See also bug 209694 comment 15 and forward.

FWIW, I don't think it makes sense either ;-)

Comment 5

[Robert O'Callahan (:roc) (email my personal email if necessary)]

What Mats said. IE and Opera are wrong according to the spec, and we are right.
As you can tell from my comments in bug 209694, I agree that the spec isn't very
sensible.

Comment 6

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Basically here's what happens in testcase
https://bugzilla.mozilla.org/attachment.cgi?id=172741 if you follow through the
spec.

Start by assuming there is no clearance. Then the margin of the 'clear' block
collapses with the margin of BODY. The top edge of the float gets placed at the
bottom of the collapsed margin, and so does the top edge of the 'clear' block.

OOPS! The 'clear' block isn't clear of the float, so we must give it clearance.
Its top margin doesn't collapse with BODY anymore. Now the top edge of the float
gets placed at BODY's top edge. A clearance value is assigned so that the top
edge of the 'clear' block is exactly at the bottom of the float --- no matter
what the 'clear' block's top-margin is. If the top-margin value is high enough,
the clearance will be *negative*. That is all according to spec. Sorry, but I
didn't write the spec.

Comment 7

[Robert O'Callahan (:roc) (email my personal email if necessary)]

But believe me, if you think it's annoying to use, it was even more annoying to
implement :-)

Comment 8

[Mats Palmgren (inactive)]

FWIW, here's the algorithm that I think would make sense:

Start by assuming there is no clearance. Then the margin of the 'clear' block
collapses with the margin of BODY. The top edge of the float gets placed at the
bottom of the collapsed margin, and so does the top edge of the 'clear' block.

OOPS! The 'clear' block isn't clear of the float, so we must give it clearance.
Its top margin doesn't collapse with BODY anymore. Now the top edge of the float
gets placed at BODY's top edge [as before upto this point].

Collapse the top margin of the 'clear' block with its children normally.
If the top edge of its border-box still does not clear the float, then add
enough clearance for it to do so.

or, in other words, the border-box distance from the normal flow above is
MAX(height of float, collapsed margin)

With this algorithm, both constraints that the author specified
for the layout, clearing the float and the margin-top, are always met.
It also means clearance will not be negative.

This does not make a difference for the URL where margin-top is 100px
which is less than what is needed to clear the float, but it would make
a difference for larger margins. (For example, changing the margin-top:100px
in the URL to margin-top:500px would result in its top border being 400px
below the float.)

Comment 9

[Martijn Wargers (dead)]

Thanks for the info. I still don't understand, but if you say this is correct
behavior, I believe you :)
You can mark this INVALID, if yoy want to.
(I just need to reread the specs, I guess to understand this stuff).

Comment 10

[Robert O'Callahan (:roc) (email my personal email if necessary)]

(In reply to comment #8)
> Collapse the top margin of the 'clear' block with its children normally.
> If the top edge of its border-box still does not clear the float, then add
> enough clearance for it to do so.
> 
> or, in other words, the border-box distance from the normal flow above is
> MAX(height of float, collapsed margin)

Yeah, that would make sense to me too. Basically I think this is equivalent to
saying that the minimum clearance is zero. It would be quite easy for us to
implement, too. However I suspect the WG did have *some* reason to allow
negative clearance (they were certainly aware of the possibility).

Comment 11

[Martijn Wargers (dead)]

*** Bug 317852 has been marked as a duplicate of this bug. ***