207716 - absolute positioning doesn't vertically reflow upon style switch

Status: RESOLVED WORKSFORME

(Core :: Layout: Positioned, defect)

Description

[Mike Goodspeed]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030529
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030529

I have two style-sheets.  I use the DOM to switch between them.  One uses
absolute positioning for a div and the other doesn't.  When I switch between the
stylesheets, the absolute div doesn't reflow vertically.  This is a picky bug,
as there are lots of ways to get around this.  However, I seemed to have found
the way that it shows up.  I'll include a simplified testcase, and a couple
workarounds.

Reproducible: Always

Steps to Reproduce:
1. Load up the testcase below.

Actual Results:  
Stylesheet 1 (the one with red borders) always should have had the instructions
div flush against the title div above it.

Expected Results:  
When viewed after Stylesheet 2 (the one with blue borders), the instructions div
is a ways away from the title div.

I used some JavaScript (care of www.zeldman.com) to ease the style-switching,
but this can be done in view -> use style, or using Mozilla Firebird's Style
Selector (my version 0.2.3).  Verified in SeaMonkey 2003052908 (1.4 rc1) and in
Firebird 20030516 (0.6) on Windows XP.  I have seen had this problem on Firebird
nightlies on Win2k too.

Comment 1

[Mike Goodspeed]

Attachment: testcase

Comment 2

[Mike Goodspeed]

Attachment: workaround 1

This fix just puts Stylesheet 1 first in the source.

Comment 3

[Mike Goodspeed]

Attachment: workaround 2

This just gets rid of margin:0; for body.

Comment 4

[Mike Goodspeed]

I think I forgot to mention that these testcases use valid XHTML 1.0 Strict, but
it also breaks in XHTML 1.0 Transitional and without a DOCTYPE (therefore
standards and quirks modes).

Comment 5

[Boris Zbarsky [:bzbarsky]]

At a guess, the margin-collapsing code is doing something weird... The
instructions div does actually reflow vertically (it moves up by the size of the
top margin of the title div), but it's mispositioned by the size of the bottom
margin.

Comment 6

[Mike Goodspeed]

Attachment: Updated testcase inspired by thoughts from comment 5.

I remembered another workaround.  If you change margin:0; to margin-bottom:0;
it works.  After fooling around a bit, I was able to narrow the test-case down
to margin-top:0;

Wrap-up:
1. Body needs to have a margin-top of 0.
2. #title needs to have a margin-top of something non-0.
3. Upon changing the Stylesheet, the absolute positioned #instructions
incorrectly uses the #title margin-top for its own margin-top.

Comment 7

[Mats Palmgren (inactive)]

WFM, 2004-12-10-06 Mozilla trunk on Linux.

Comment 8

[Mike Goodspeed]

I can verify fixed on Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a6)
Gecko/20041215

Comment 9

[Jason Bassford]

No bug / patch has been referenced as the fix.

-> WORKSFORME.