list-items (LIs) near floats wrap block around float (i.e., they use -moz-float-edge)

RESOLVED FIXED in mozilla1.9beta4

Status

()

Core
Layout: Floats
P1
normal
RESOLVED FIXED
15 years ago
9 years ago

People

(Reporter: Ramarao Kanneganti, Assigned: dbaron)

Tracking

(Depends on: 1 bug, {testcase})

Trunk
mozilla1.9beta4
x86
All
testcase
Points:
---
Dependency tree / graph
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

15 years ago
Mozilla does not render the following well (I will describe the behavior below):

<div style="float:right; width:40%; color:red;">
  RED RED RED RED RED RED RED RED RED RED RED RED RED RED RED
</div>
<ol>
<li> 
Outside list. Outside list. 
Outside list. Outside list. 
Outside list. Outside list. 
Outside list. Outside list. 
Outside list. Outside list. 
Outside list. Outside list. 
Outside list. Outside list. 
Outside list. Outside list. 
Outside list. Outside list.
<ol> 
---

As expected, float box shows on the top right corner. The text from the list
item does not flow underneath the box. FYI, in IE, it does.
(Assignee)

Comment 1

15 years ago
Text should never overlap floats.  If that's what IE does, it's a bug.

(Did you mean </ol> in the testcase?)
(Reporter)

Comment 2

15 years ago
SOrry. I meant </ol>

I understand that the text is not supposed to overlap. Currently, it is 
doing the following (approximately. Do not bother about the actual text).

1. Outside list. Outside list.   RED RED RED RED
   Outside list. Outside list.   RED RED RED RED
   Outside list. Outside list.
   Outside list. Outside list.
   Outside list. Outside list.

Is the following not accuate behavior?

1. Outside list. Outside list.   RED RED RED RED
   Outside list. Outside list.   RED RED RED RED
   Outside list. Outside list. Outside list. Outside
   Outside list. Outside list. Outside list. Outside
   Outside list. Outside list. Outside list. Outside

[Please ignore the actual text. I am trying to draw the
text flow.]

Thanks,
Rama
(Assignee)

Comment 3

15 years ago
Ah, right.  We do that because of what happens to the bullets in the presence of
left-floats, but the main problem is that our solution to that problem really
doesn't work very well.  See bug 54696, bug 69490, and bug 69491.
Status: UNCONFIRMED → NEW
Component: Style System → Layout
Ever confirmed: true
Summary: Text does not wrap around floating boxes nicely, when used with lists. → [FLOAT]Text does not wrap around floating boxes nicely, when used with lists.
(Assignee)

Updated

15 years ago
Component: Layout → Layout: Floats
*** Bug 204869 has been marked as a duplicate of this bug. ***
Blocks: 163110
Depends on: 54696, 69490, 69491
*** Bug 117542 has been marked as a duplicate of this bug. ***
Blocks: 138934
*** Bug 243555 has been marked as a duplicate of this bug. ***
*** Bug 244625 has been marked as a duplicate of this bug. ***

Comment 8

13 years ago
Created attachment 166900 [details]
Testcase

Updated

13 years ago
Keywords: testcase
OS: Windows 2000 → All
Summary: [FLOAT]Text does not wrap around floating boxes nicely, when used with lists. → Text does not wrap around floating boxes nicely, when used with lists.

Updated

13 years ago
No longer blocks: 138934
*** Bug 293856 has been marked as a duplicate of this bug. ***

Comment 10

12 years ago
Wrapping the ul and li in a border or outline clearly shows the float is acting on the li block, rather than the line box.  IE and Opera render as expected.

This bug breaks layouts.
(Assignee)

Updated

12 years ago
Summary: Text does not wrap around floating boxes nicely, when used with lists. → list-items (LIs) near floats wrap block around float (i.e., they use -moz-float-edge)
(Assignee)

Comment 11

12 years ago
*** Bug 301335 has been marked as a duplicate of this bug. ***
(Assignee)

Comment 12

12 years ago
*** Bug 320610 has been marked as a duplicate of this bug. ***
(Assignee)

Updated

12 years ago
Severity: minor → normal
Priority: -- → P1
(Assignee)

Updated

12 years ago
Blocks: 301335
*** Bug 321583 has been marked as a duplicate of this bug. ***

Comment 14

12 years ago
Bug 321583 has test-case attachments that demonstrate this more clearly. 

Comment 15

11 years ago
i'm not too sure, but i think that this is a duplicate of #163110. could someone please confirm this?
(Assignee)

Comment 16

11 years ago
No, it's not.  This is a bug complaining that we use -moz-float-edge at all; that's a bug complaining that it works incorrectly.  (There's another bug somewhere about cases where it doesn't work at all.)

Comment 17

11 years ago
Behaviour is even stranger if the <li> element contains <p>...</p>. For example open http://www.jdawiseman.com/papers/tournaments/all-play-all/apa_23.html and continuously vary the window width, observing strange discontinuous jump in rendering. 

Updated

10 years ago
Duplicate of this bug: 389956

Updated

10 years ago
Duplicate of this bug: 141974

Comment 20

10 years ago
I raised Bug 389956 because my picture was aligned rather than floated, and was part of the paragraph before the list.  I am happy to have it declared a duplicate of this one, but wonder if my test page might be any use because of these differences.  I have put a copy of it aside so that it won't be destroyed if I update my actual page at a later date: http://www.bathheritagewatchdog.org/testdata.htm

Comment 21

10 years ago
Wow, this bug is over five years old.  I have created a simple page that displays this behavior here:
http://data.lancefisher.net/FireFoxListItemFlowBug.htm

For work-arounds, I've found the following solutions:
1. change the ul and li elements in the markup to divs (looses semantics)
2. set the display style on the li elements to inline. (but the content of the li will no longer flow inside the element)
3. set a width on the li elemtents (but this will cause flow problems in IE7)

Comment 22

10 years ago
Here is a page that displays the desired behavior:
http://data.lancefisher.net/FireFoxListItemFlowBug2.htm

It is using div elements instead of ul and li elements.

(Assignee)

Updated

9 years ago
Blocks: 283798
(Assignee)

Updated

9 years ago
Blocks: 127878
(Assignee)

Comment 23

9 years ago
Fixed by checkin of bug 413840 (which I fixed by fixing this bug).

Bug 57882 covers making what the -moz-float-edge was trying (but failing) to do actually happen.
Status: NEW → RESOLVED
Last Resolved: 9 years ago
Depends on: 413840
Resolution: --- → FIXED
(Assignee)

Updated

9 years ago
QA Contact: ian → layout.floats
Flags: in-testsuite?
(Assignee)

Comment 24

9 years ago
This is tested by http://mxr.mozilla.org/seamonkey/source/layout/reftests/bugs/413840-background-unchanged.html (and the new behavior is tested a little more by the tests for bug 413840).
Flags: in-testsuite? → in-testsuite+

Comment 25

9 years ago
Created attachment 302759 [details]
testing the flow of the inline box around floats

Comment 26

9 years ago
David, your test case doesn't address the issue here; that of the inline box not wrapping the float.  I'm not positioned to run against the nightly builds, so can't test myself.  I will post a test case.

I would appreciate anyone's results.

Is there a timetable for the patch's inclusion? 1.8.1.13?
(Assignee)

Comment 27

9 years ago
Firefox 3.0 beta 4 / Gecko 1.9 beta 4.
Target Milestone: --- → mozilla1.9beta4

Comment 28

9 years ago
@dbaron: Thanks.  Saw a screendump, it looks good. Even the {display: list-item;} used on the p element acts more as expected.
You need to log in before you can comment on or make changes to this bug.