absolute positioning doesn't vertically reflow upon style switch

RESOLVED WORKSFORME

Status

()

Core
Layout: R & A Pos
--
minor
RESOLVED WORKSFORME
15 years ago
13 years ago

People

(Reporter: Mike Goodspeed, Unassigned)

Tracking

({testcase})

Trunk
x86
Windows XP
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments, 1 obsolete attachment)

(Reporter)

Description

15 years ago
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.
(Reporter)

Comment 1

15 years ago
Created attachment 124616 [details]
testcase
(Reporter)

Comment 2

15 years ago
Created attachment 124617 [details]
workaround 1

This fix just puts Stylesheet 1 first in the source.
(Reporter)

Comment 3

15 years ago
Created attachment 124618 [details]
workaround 2

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

Comment 4

15 years ago
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).
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.
(Reporter)

Comment 6

15 years ago
Created attachment 124622 [details]
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.
Attachment #124616 - Attachment is obsolete: true

Updated

13 years ago
Keywords: testcase

Comment 7

13 years ago
WFM, 2004-12-10-06 Mozilla trunk on Linux.
(Reporter)

Comment 8

13 years ago
I can verify fixed on Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8a6)
Gecko/20041215
Status: UNCONFIRMED → RESOLVED
Last Resolved: 13 years ago
Resolution: --- → FIXED

Comment 9

13 years ago
No bug / patch has been referenced as the fix.

-> WORKSFORME.
Status: RESOLVED → UNCONFIRMED
Resolution: FIXED → ---

Updated

13 years ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: 13 years ago13 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.