Closed Bug 163110 Opened 23 years ago Closed 17 years ago

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

Categories

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

Product:
Core
Component:
Layout: Floats
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla1.9beta4

People

(Reporter: bugzilla, Assigned: dbaron)

References

(
URL
)

Details

(Keywords: testcase)

Attachments

(2 files)

Reported URL with borders added
1.44 KB, text/html
Details
Another demonstration of this bug
3.06 KB, text/html
Details
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... +-(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.
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
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
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: 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!
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.
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 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!
Could someone PLEASE PLEASE PLEASE raise the priority on this SEVERE but that has been around for more than 4 years???????????? PLEASE!!!!!!
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: http://www.ccrnp.ncifcrf.gov/~toms/Leftyear2004.html 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.
Status: NEW → RESOLVED
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.

Attachment

General

Creator:
Created:
Updated:
Size: