Last modified: 2011-05-03 10:51:49 UTC
The bullets on a bulleted list to the right of a left-float image are hidden by the image (using IE) or overlap the image (using Firefox). Here is a testcase which demonstrates the problem if enterter into the Wikipedia sandbox: Try a float left image with bullets to right. [[Image:Sandbox25703 5762.jpg|thumb|left|A large, loosely contained sandpit for kids]] Here is some text *And a bullet *Another bullet *Third bullet And more text.
Confirmed in IE. If there's some harmless IE workaround, we can use it, but either way, this is basically a browser and/or standards bug and our ability to fix it may be limited. Can anyone else confirm that this bug occurs in Firefox? Using 1.5.0.7, I get expected behavior, namely that all bullets are fully visible and don't overlap with the image.
No. In Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.0.5) Gecko/20060731 Ubuntu/dapper-security Firefox/1.5.0.5 I see it all correctly. No bullets missing.
My Firefox was slightly downlevel; I just updated to the latest, which is: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4 and with this, using the above testcase pasted into [http://en.wikipedia.org/wiki/Wikipedia:Sandbox] I see no bullets at all. The text of each bullet lines up with the (unbulleted) text above and below. There's no hint of a list, which is extremely misleading. Mike
That version is still outdated. I have Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7. That's the latest in the 1.5 Firefox line. Regardless, can you confirm that the bug occurs in the URL I posted, http://en.wikipedia.org/wiki/User:Simetrical/7353? (Note: Opera also displays as expected, with the bullets visible to the right of the image.)
(In reply to comment #4) > Regardless, can you confirm that the bug occurs in the URL I > posted, http://en.wikipedia.org/wiki/User:Simetrical/7353? > Firefox 1.5.0.7 on Linux (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7) (downloaded from http://www.mozilla.com/ tarball) shows this fine.
Re #4, Yes, both IE (7 beta) and Firefox 1.5.0.4 as detailed above show the problem when pointed at http://en.wikipedia.org/wiki/User:Simetrical/7353? Firefox 1.5.0.7 just started automatic update when I looked at that URL a few minutes ago (2006.09.19 17:35 UTC). I'll try it, too, later.
Created attachment 2373 [details] Bullets problem on latest Firefox Visual verification of the problem.
OK, with: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7, the problem is still there -- no hint of the bullets to the right of the image at http://en.wikipedia.org/wiki/User:Simetrical/7353 I've attached an cropped screenshot showing the relevant view of the page and also the Firefox 'About' dialog confirming the version #.
A picture is worth a thousand words. Confirmed for Cologne Blue, Nostalgia, Classic, and partly for Simple, in latest Firefox. Monobook and Chick are unaffected, because Firefox draws the bullets on top of the border, and the div.tleft border in Monobook/Chick is thick and the same color as the background, basically a pseudo-margin. I've greatly expanded the test case: take a look at the URL and you'll be able to see clearly how what happens here. So why does this occur? I'm not clear enough on the CSS to figure it out exactly, but seemingly the list marker box is supposed to go inside the border; IE puts it beneath, Opera and Firefox above. Why it's not to the right of the margin, I have no idea, but it seems likely to be part of the standard (something about only line boxes being compressed next to floats, I think I recall). Anyway, on a case-by-case basis the behavior can be manually tweaked by adding left margin to the list items. There's no way for MediaWiki to know whether a given list item will be rendered to the right of a float or not, so it can't be done software-side; as such, either the styles need to be modified to account for this corner case unobtrusively, or it has to be written off as a standards bug. Anyone want to play around with their CSS to see if they can get something that looks good without changing the look too much?
Unfortunately even the workaround that works for FireFox (a wider left margin on list items) does not help with IE. Whatever list margin is specified is 'eaten up'. A partial fix is to add a wider border on the right of the image itself .. but this then pushes 'normal' lines of text out to the right of the bullets. <sigh>
Whatever has been done to get the test case working was not working for me in http://en.wikipedia.org/w/index.php?title=Wikipedia:WikiProject_Bangladesh/Announcements&oldid=182313333 with the following: Mozilla Firefox version "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12" Microsoft Windows Internet Explorer 7 (IE7) version "7.0.5730.11"
*** Bug 22865 has been marked as a duplicate of this bug. ***
This is normal HTML/CSS behavior. The fix is to add (for vector): #content ul, ol { list-style-position: inside; } But I'm not sure what kind of effect that might have on our existing content (seems to shift the content more than before), nor do I know how well it is supported in browsers. Perhaps it's time to find out however.
Works fine in recent browsers (FF2, Webkit), and is probably not big enough of an issue to justify all list indentations.
