The default bug view has changed. See this FAQ.

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

RESOLVED FIXED in mozilla1.9beta4

Status

()

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

People

(Reporter: Nathan Hollingsworth, Assigned: dbaron)

Tracking

({testcase})

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

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(2 attachments)

(Reporter)

Description

15 years ago
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.

Comment 1

15 years ago
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%;}

Comment 2

15 years ago
Yes, this is actually because of the way the floats work. Let me draw a picture...

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

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.

Updated

15 years ago
QA Contact: petersen → moied

Comment 3

15 years ago
--> 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.
Created attachment 96044 [details]
Reported URL with borders added

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

Comment 6

15 years ago
Ugh.  This is related to the use of -moz-float-edge for lists.  ->Layout
Assignee: dbaron → attinasi
Status: UNCONFIRMED → NEW
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

Updated

15 years ago
Target Milestone: --- → Future

Comment 7

15 years ago
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

Comment 8

15 years ago
"-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

Comment 9

15 years ago
Reproduced in 12/16/02 Trunk, Windows XP
Keywords: testcase
(Assignee)

Comment 10

14 years ago
*** Bug 194910 has been marked as a duplicate of this bug. ***

Comment 11

14 years ago
-> Layout: Floats
Assignee: attinasi → float
Component: Layout → Layout: Floats
QA Contact: petersen → ian

Comment 12

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

Comment 13

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

Comment 14

14 years ago
*** Bug 201444 has been marked as a duplicate of this bug. ***
Depends on: 143162
Blocks: 206049
(Assignee)

Updated

14 years ago
No longer blocks: 206049
(Assignee)

Comment 15

14 years ago
*** 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. ***

Comment 20

12 years ago
*** Bug 295480 has been marked as a duplicate of this bug. ***

Comment 21

12 years ago
*** Bug 304839 has been marked as a duplicate of this bug. ***

Comment 22

12 years ago
Why isn't this bug being solved?

Comment 23

12 years ago
Please look at the bottom of this page:

http://www.lecb.ncifcrf.gov/~toms/LeftHanded.DNA.html

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!


Comment 24

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

http://www.julianstahnke.de/problem/

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.

Comment 25

12 years ago
Oh, and that bug exists in Firefox 1.5, too. If that helps.

Comment 26

12 years ago
(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
Firefox/1.0.6

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!

Comment 27

11 years ago
Could someone PLEASE PLEASE PLEASE raise the priority on this SEVERE but that has been around for more than 4 years????????????

PLEASE!!!!!!

Comment 28

11 years ago
that should have been 'bug' - can you tell that I'm frustrated?  It's wrecking
my pages.

Comment 29

10 years ago
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.

Comment 30

10 years ago
I have been avoiding the bug in my new pages.  A page that is still wrecked
in Firefox is:

http://www.ccrnp.ncifcrf.gov/~toms/Leftyear2004.html

Some serious bugs are not being addressed.  Is the mozilla/firefox/seamonkey
browser community dead?

Comment 31

10 years ago
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.

Comment 32

10 years ago
...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. 

Updated

9 years ago
Duplicate of this bug: 412097

Comment 34

9 years ago
Created attachment 299644 [details]
Another demonstration of this bug

I added another example.
(Assignee)

Comment 35

9 years ago
Fixed by checkin of bug 413840.
Status: NEW → RESOLVED
Last Resolved: 9 years ago
Depends on: 413840
QA Contact: ian → layout.floats
Resolution: --- → FIXED
Flags: in-testsuite?
(Assignee)

Updated

9 years ago
Assignee: layout.floats → dbaron
(Assignee)

Updated

9 years ago
Target Milestone: Future → mozilla1.9beta4
You need to log in before you can comment on or make changes to this bug.