Page MenuHomePhabricator

List marker boxes lost to right of a floated image
Closed, DeclinedPublic

Description

Author: mfc

Description:
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.


Version: unspecified
Severity: minor
URL: http://en.wikipedia.org/wiki/User:Simetrical/7353

Details

Reference
bz7353

Event Timeline

bzimport raised the priority of this task from to Low.Nov 21 2014, 9:24 PM
bzimport set Reference to bz7353.
bzimport added a subscriber: Unknown Object (MLST).

ayg wrote:

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.

mfc wrote:

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

ayg wrote:

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

rotemliss wrote:

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

mfc wrote:

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.

mfc wrote:

Bullets problem on latest Firefox

Visual verification of the problem.

Attached:

ff-bullets.jpg (587×800 px, 139 KB)

mfc wrote:

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 #.

ayg wrote:

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?

mfc wrote:

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>

RSYQFIOJGWZA wrote:

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.

Aklapper changed the task status from Resolved to Declined.Oct 26 2015, 10:05 AM
Aklapper claimed this task.