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
Categories
(Core :: Layout: Floats, defect, P2)
Core
Layout: Floats
Tracking
()
RESOLVED
FIXED
mozilla1.9beta4
People
(Reporter: bugzilla, Assigned: dbaron)
References
()
Details
(Keywords: testcase)
Attachments
(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.
Comment 1•22 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•22 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•22 years ago
|
QA Contact: petersen → moied
Comment 3•22 years ago
|
||
--> Style System. Not sure whether this bug is valid or not.
Assignee: attinasi → dbaron
Component: Layout → Style System
QA Contact: moied → ian
Comment 4•22 years ago
|
||
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.
Comment 5•22 years ago
|
||
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•22 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•22 years ago
|
Target Milestone: --- → Future
Comment 7•22 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
"-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
Assignee | ||
Comment 10•22 years ago
|
||
*** Bug 194910 has been marked as a duplicate of this bug. ***
Comment 11•22 years ago
|
||
-> Layout: Floats
Assignee: attinasi → float
Component: Layout → Layout: Floats
QA Contact: petersen → ian
Comment 12•21 years ago
|
||
*** Bug 122156 has been marked as a duplicate of this bug. ***
Assignee | ||
Comment 13•21 years ago
|
||
*** Bug 200993 has been marked as a duplicate of this bug. ***
Assignee | ||
Comment 14•21 years ago
|
||
*** Bug 201444 has been marked as a duplicate of this bug. ***
Assignee | ||
Comment 15•21 years ago
|
||
*** Bug 206049 has been marked as a duplicate of this bug. ***
![]() |
||
Comment 16•21 years ago
|
||
*** Bug 122731 has been marked as a duplicate of this bug. ***
![]() |
||
Comment 17•20 years ago
|
||
*** Bug 236869 has been marked as a duplicate of this bug. ***
![]() |
||
Comment 18•20 years ago
|
||
*** Bug 241899 has been marked as a duplicate of this bug. ***
![]() |
||
Comment 19•20 years ago
|
||
*** Bug 243394 has been marked as a duplicate of this bug. ***
Comment 20•19 years ago
|
||
*** Bug 295480 has been marked as a duplicate of this bug. ***
Comment 21•19 years ago
|
||
*** Bug 304839 has been marked as a duplicate of this bug. ***
Comment 22•19 years ago
|
||
Why isn't this bug being solved?
Comment 23•19 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•19 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•19 years ago
|
||
Oh, and that bug exists in Firefox 1.5, too. If that helps.
Comment 26•19 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•19 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•19 years ago
|
||
that should have been 'bug' - can you tell that I'm frustrated? It's wrecking my pages.
Comment 29•18 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•17 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•17 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•17 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.
Comment 34•17 years ago
|
||
I added another example.
Assignee | ||
Comment 35•17 years ago
|
||
Fixed by checkin of bug 413840.
Status: NEW → RESOLVED
Closed: 17 years ago
Depends on: 413840
QA Contact: ian → layout.floats
Resolution: --- → FIXED
Updated•17 years ago
|
Flags: in-testsuite?
Assignee | ||
Updated•17 years ago
|
Assignee: layout.floats → dbaron
Assignee | ||
Updated•17 years ago
|
Target Milestone: Future → mozilla1.9beta4
You need to log in
before you can comment on or make changes to this bug.
Description
•