Closed Bug 143162 Opened 19 years ago Closed 13 years ago

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

Categories

(Core :: Layout: Floats, defect, P1)

x86
All
defect

Tracking

()

RESOLVED FIXED
mozilla1.9beta4

People

(Reporter: rama, Assigned: dbaron)

References

(Depends on 1 open bug)

Details

(Keywords: testcase)

Attachments

(2 files)

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.
Text should never overlap floats.  If that's what IE does, it's a bug.

(Did you mean </ol> in the testcase?)
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
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.
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. ***
Attached file Testcase
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.
No longer blocks: 138934
*** Bug 293856 has been marked as a duplicate of this bug. ***
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.
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)
*** Bug 301335 has been marked as a duplicate of this bug. ***
*** Bug 320610 has been marked as a duplicate of this bug. ***
Severity: minor → normal
Priority: -- → P1
*** Bug 321583 has been marked as a duplicate of this bug. ***
Bug 321583 has test-case attachments that demonstrate this more clearly. 
i'm not too sure, but i think that this is a duplicate of #163110. could someone please confirm this?
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.)
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. 
Duplicate of this bug: 389956
Duplicate of this bug: 141974
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
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)
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.

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
Closed: 13 years ago
Depends on: 413840
Resolution: --- → FIXED
QA Contact: ian → layout.floats
Flags: in-testsuite?
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+
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?
Firefox 3.0 beta 4 / Gecko 1.9 beta 4.
Target Milestone: --- → mozilla1.9beta4
@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.