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

Status: RESOLVED FIXED

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

Description

[Ramarao Kanneganti]

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.

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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

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

Comment 2

[Ramarao Kanneganti]

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

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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.

Comment 4

[Boris Zbarsky [:bzbarsky]]

*** Bug 204869 has been marked as a duplicate of this bug. ***

Comment 5

[Boris Zbarsky [:bzbarsky]]

*** Bug 117542 has been marked as a duplicate of this bug. ***

Comment 6

[Boris Zbarsky [:bzbarsky]]

*** Bug 243555 has been marked as a duplicate of this bug. ***

Comment 7

[Boris Zbarsky [:bzbarsky]]

*** Bug 244625 has been marked as a duplicate of this bug. ***

Comment 8

[Mats Palmgren (inactive)]

Attachment: Testcase

Comment 9

[Martijn Wargers (dead)]

*** Bug 293856 has been marked as a duplicate of this bug. ***

Comment 10

[Gary Turner]

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.

Comment 11

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

*** Bug 301335 has been marked as a duplicate of this bug. ***

Comment 12

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

*** Bug 320610 has been marked as a duplicate of this bug. ***

Comment 13

[Mats Palmgren (inactive)]

*** Bug 321583 has been marked as a duplicate of this bug. ***

Comment 14

[Julian D. A. Wiseman]

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

Comment 15

[webograph]

i'm not too sure, but i think that this is a duplicate of #163110. could someone please confirm this?

Comment 16

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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

[Julian D. A. Wiseman]

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. 

Comment 20

[Jim Warren]

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

[Lance Fisher]

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

[Lance Fisher]

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.

Comment 23

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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.

Comment 24

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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).

Comment 25

[Gary Turner]

Attachment: testing the flow of the inline box around floats

Comment 26

[Gary Turner]

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?

Comment 27

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Firefox 3.0 beta 4 / Gecko 1.9 beta 4.

Comment 28

[Gary Turner]

@dbaron: Thanks.  Saw a screendump, it looks good. Even the {display: list-item;} used on the p element acts more as expected.