Overlap of two constrained right-floats on the same 'line' [FLOAT]

VERIFIED FIXED

Status

()

VERIFIED FIXED
18 years ago
18 years ago

People

(Reporter: T.J.Hunt, Assigned: waterson)

Tracking

(Blocks: 1 bug, {css1, testcase})

Trunk
x86
Windows 98
css1, testcase
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [Hixie-P4] serious floater bug but has workaround), URL)

Attachments

(1 attachment)

(Reporter)

Description

18 years ago
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Win98; en-US; 0.8) Gecko/20010222
BuildID:    2001022209

In a situation where there are two side-by-side right floats. If you shrink the
width of the browser window enough, they no longer fit on one line, so they
wrap. At this point the two images should be both be right aligned on the right
margin. In fact, the second one does not get aligned properly.

Reproducible: Always
Steps to Reproduce:
1. Load the URL referred to above.
2. Look at the two test-cases on the page. They are separated by a horizontal rule.
3. Make the page narrower until the two floats no longer fit side-by-side (about
200px wide). (Note: to perform this step you may have to expand your side-bar!)

Actual Results:  In the top test: The second box moves down to below the first
(correct) but its horizontal position is wrong, it seems to stay a constant
distance from the left margin.

In the second test: The second box does not wrap onto the next line at all.
Instead the two boxes start to overlap.

Expected Results:  Whe the page is too narrow for the images to be displayed
side-by-side, the images should appear one above the other, right aligned
against the right margin.

Note that the top test gets this correct for a narrow range of page-widths just
after the wrap happens.

The original page on which I spotted the bug is:

http://www.britgo.org/clubs/mk/mk.html (at the bottom of the page)

The bug only seems to appear if the content of the float is sized automatically,
e.g. an image or some text with no width or height style rules.

If you replace:

<span class="floatright">XXXXX</span>

with

<img class="floatright" ... />

the page behaves properly.

If you replace it with

<span class="floatright"><img ... /></span>

then the bug occurs.

The difference between the two tests is that in the first test, the float is
given a 10px left margin.
Ian, is this related to one of our other float bugs?
The first problem (with the margins) is bug 59200.
The second problem appears to be new though. 

T.J.Hunt: Good catches! I thought we'd caught all the floater bugs, so 
congratulations on finding a new one!!! Cheers!
Assignee: karnaze → attinasi
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: css1, mozilla1.0, testcase
QA Contact: petersen → ian
Summary: When two right-floats on the same line wrap, the horizontal position of the second one is wrong. → Overlap of two constrained right-floats on the same 'line' [FLOAT]
Whiteboard: [Hixie-P4] serious floater bug but has workaround)
Created attachment 27737 [details]
Simple testcase. Resize the window to see the effect.

Comment 4

18 years ago
Accepting: hmm - why doesn't the second float simply move down to the next line 
when there is not enough room for it on the first line? 
Status: NEW → ASSIGNED
Blocks: 78094
(Assignee)

Updated

18 years ago
Assignee: attinasi → waterson
Status: ASSIGNED → NEW
Depends on: 59200
(Assignee)

Comment 5

18 years ago
The last patch in bug 59200 fixes this.
(Assignee)

Updated

18 years ago
Status: NEW → ASSIGNED
(Assignee)

Comment 6

18 years ago
Fixed with checkin for bug 59200.
Status: ASSIGNED → RESOLVED
Last Resolved: 18 years ago
Resolution: --- → FIXED
VERIFIED FIXED, weeee!
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.