Closed Bug 163110 Opened 22 years ago Closed 17 years ago

Lists (which have -moz-float-edge) and right floated images don't get along


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






(Reporter: bugzilla, Assigned: dbaron)




(Keywords: testcase)


(2 files)

From Bugzilla Helper:
User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 4.0)
BuildID:    2002072104

If you have a list (OL or UL) in which the last element of each LI is a image 
with the style foat : right, the right-hand ?margin? will grow with each 
addition LI element in the list.

Visit the URL supplied for an example.  The page is very simple and only 
contains one list.

Reproducible: Always
Steps to Reproduce:
Visit the supplied URL.

Actual Results:  Page isn't displayed properly.

Expected Results:  Each of the img element should be aligned vertically and the 
paragraphs of the LI elements should not be shrinking in width.
It isn't the right margin that's increasing, it's the width of the li that's
decreasing because the images are in its way. You can see verify this by adding
a border to the list items[1]. Forcing the width of the li to 100%[2] seems to
generate the desired result.

[1] li {border: 1px dotted blue;}

[2] li {width: 100%;}
Yes, this is actually because of the way the floats work. Let me draw a picture...

|  +-(LI)-------------------------------------------+ |
|* | List item 1                                    | |
|  | +-(P)----------------------------------------+ | |
|  | +------------------------------------+-------+ | |
|  +--------------------------------------| Float |-+ |
|  +------------------------------------+ +-------+   |
|* | List item 2                        |             |
|  | +-(P)----------------------------+ |             |
|  | +------------------------+-------+ |             |
|  +--------------------------| Float |-+             |
|  +------------------------+ +-------+               |
|* | List item 3            |                         |

Basically, the IMG is floating to the right of it's closest block-level
container (the P tag), but does not affect the elements height (correct
behaviour for a float, as far as I know). Hence, it extends below the containing
list item, and causes the following tag to be indented to avoid it.

I hope that helps explain it a bit.
QA Contact: petersen → moied
--> Style System. Not sure whether this bug is valid or not.
Assignee: attinasi → dbaron
Component: Layout → Style System
QA Contact: moied → ian
I believe this bug is valid.  I have a testcase (soon to be attached) that shows
the 'li' elements getting more narrow at each float, which is not correct under
CSS2.  The floats can certainly end up next to each other in a stair-step effect
like we see in the testcase, but only if they're next to each other, which isn't
happening here.  Either way, the 'li' elements should all be the same width (the
width of the parent), and they aren't.
I added borders to the 'li' and 'img' elements in order to show more clearly
what's happening in originally reported test page.  The result looks quite
wrong to me.
Ugh.  This is related to the use of -moz-float-edge for lists.  ->Layout
Assignee: dbaron → attinasi
Component: Style System → Layout
Ever confirmed: true
Priority: -- → P2
QA Contact: ian → petersen
Summary: Ordered lists and images using the style "float : right" don't get along → Lists (which have -moz-float-edge) and right floated images don't get along
Target Milestone: --- → Future
Platform/OS -> All.

Ok, so according to CSS 2 it seems only the actual inline content should be
affected directly by the floats.

Does "-moz-float-edge: margin-box;", as I guess, make the list item flow around
the floats' margin-boxs? If so, can we remove it? (since removing that property
does indeed render the attachment corectly)
OS: Windows NT → All
Hardware: PC → All
"-moz-float-edge: margin-box;" has been removed from html.css. ( after 09-15 ) and 
the problem disappeared in the afterward build. 
attinasi, pls close it
Reproduced in 12/16/02 Trunk, Windows XP
Keywords: testcase
*** Bug 194910 has been marked as a duplicate of this bug. ***
-> Layout: Floats
Assignee: attinasi → float
Component: Layout → Layout: Floats
QA Contact: petersen → ian
*** Bug 122156 has been marked as a duplicate of this bug. ***
*** Bug 200993 has been marked as a duplicate of this bug. ***
*** Bug 201444 has been marked as a duplicate of this bug. ***
Depends on: 143162
Blocks: 206049
*** Bug 206049 has been marked as a duplicate of this bug. ***
*** Bug 122731 has been marked as a duplicate of this bug. ***
*** Bug 236869 has been marked as a duplicate of this bug. ***
*** Bug 241899 has been marked as a duplicate of this bug. ***
*** Bug 243394 has been marked as a duplicate of this bug. ***
*** Bug 295480 has been marked as a duplicate of this bug. ***
*** Bug 304839 has been marked as a duplicate of this bug. ***
Why isn't this bug being solved?
Please look at the bottom of this page:

and you will see that this bug is completely destroying my web page.  It is making
me want to abandon mozilla, but there is no better browser!

CAN THIS BE LOOKED AT AND FIXED PLEASE?  It's been hanging around for three
years!!!!  It just had its third birthday!

Here's another testcase, at least it seems to be the same bug:

Giving the <code><li></code> a <code>width:100%</code> fixes it, but then you
can't apply any padding or margins to it, which is not very fortunate.
Oh, and that bug exists in Firefox 1.5, too. If that helps.
(In reply to comment #25)
> Oh, and that bug exists in Firefox 1.5, too. If that helps.

I confirm.  It failed in Firefox:

Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.10) Gecko/20050716

It worked fine in Safari Version 2.0.1 (412.5)

Exploiter 5.2 for mac failed in a different way, it didn't wrap
the text around the image at all, putting it on the far right
and then ignoring that for the rest of the page.

I'm glad this is a problem in firefox - the supposedly hot new perfect
browser.  Maybe that could goose someone to fix the problem?
Isn't this just trivial?  Somewhere there is just a parameter that is
being changed that should not be!
Could someone PLEASE PLEASE PLEASE raise the priority on this SEVERE but that has been around for more than 4 years????????????

that should have been 'bug' - can you tell that I'm frustrated?  It's wrecking
my pages.
I just ran into this bug today.  Looking through Bugzilla, I discovered that it's been reported many times (bug #143162, bug #321583, etc.).  It has been over a year since the last comment on this big and 4.5 years since it was first reported.

I don't appear to have the ability to add votes to this bug, but I would like to add my voice those urging that its priority be raised.  It causes significant layout problems for some pages.

I am a programmer and am willing to help, but don't have the necessary familiarity with the layout code or the moz-float-edge property.  If you believe it is more efficient for me to pick up this knowledge and contribute to fixing the problem than to have it fixed by someone who already has this background knowledge, let me know.
I have been avoiding the bug in my new pages.  A page that is still wrecked
in Firefox is:

Some serious bugs are not being addressed.  Is the mozilla/firefox/seamonkey
browser community dead?
It would be great for this bug to stay alive. Firefox seems to be the only modern browser to do this wrong, which is a total shame. Lists and floats are pretty common things that are nice to be able to mix together.
...just as an FYI to some would-be fixer of this bug in some unspecified future date... 
    ...or to anyone looking for a reasonable work around... Firefox does not choke on definition lists in the same way. It seems weird to me that the <dl> list would be handled differently from the <ol> or <ul> lists, but it looks like it is. 

I guess I will start using <dl>'s a lot more now and if I need a bullet, I will style one in there. 
I added another example.
Fixed by checkin of bug 413840.
Closed: 17 years ago
Depends on: 413840
QA Contact: ian → layout.floats
Resolution: --- → FIXED
Flags: in-testsuite?
Assignee: layout.floats → dbaron
Target Milestone: Future → mozilla1.9beta4
You need to log in before you can comment on or make changes to this bug.