Closed
Bug 207716
Opened 21 years ago
Closed 20 years ago
absolute positioning doesn't vertically reflow upon style switch
Categories
(Core :: Layout: Positioned, defect)
Tracking
()
RESOLVED
WORKSFORME
People
(Reporter: mikegoodspeed, Unassigned)
Details
(Keywords: testcase)
Attachments
(3 files, 1 obsolete file)
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•21 years ago
|
||
Reporter | ||
Comment 2•21 years ago
|
||
This fix just puts Stylesheet 1 first in the source.
Reporter | ||
Comment 3•21 years ago
|
||
This just gets rid of margin:0; for body.
Reporter | ||
Comment 4•21 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).
Comment 5•21 years ago
|
||
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•21 years ago
|
||
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
Comment 7•20 years ago
|
||
WFM, 2004-12-10-06 Mozilla trunk on Linux.
Reporter | ||
Comment 8•20 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
Closed: 20 years ago
Resolution: --- → FIXED
Comment 9•20 years ago
|
||
No bug / patch has been referenced as the fix. -> WORKSFORME.
Status: RESOLVED → UNCONFIRMED
Resolution: FIXED → ---
Updated•20 years ago
|
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago → 20 years ago
Resolution: --- → WORKSFORME
You need to log in
before you can comment on or make changes to this bug.
Description
•