Last modified: 2013-05-20 12:42:51 UTC

Wikimedia Bugzilla is closed!

Wikimedia has migrated from Bugzilla to Phabricator. Bug reports should be created and updated in Wikimedia Phabricator instead. Please create an account in Phabricator and add your Bugzilla email address to it.
Wikimedia Bugzilla is read-only. If you try to edit or create any bug report in Bugzilla you will be shown an intentional error message.
In order to access the Phabricator task corresponding to a Bugzilla report, just remove "static-" from its URL.
You could still run searches in Bugzilla or access your list of votes but bug reports will obviously not be up-to-date in Bugzilla.
Bug 11782 - List indicators overlap with left floating images/blocks
List indicators overlap with left floating images/blocks
Status: NEW
Product: MediaWiki
Classification: Unclassified
Parser (Other open bugs)
unspecified
All All
: Low normal (vote)
: ---
Assigned To: Nobody - You can work on this!
:
: 25158 48322 (view as bug list)
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2007-10-27 17:29 UTC by FT2
Modified: 2013-05-20 12:42 UTC (History)
6 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description FT2 2007-10-27 17:29:30 UTC
Examples:

1) See the (non) indented bullet list (:*) at:

http://en.wikipedia.org/w/index.php?title=Essjay_controversy&oldid=167457832#Wikipedia_critics


2) See the (non) indented paragraph (:) at:

http://en.wikipedia.org/wiki/Essjay_controversy#Identity_revealed
Comment 1 FT2 2007-10-27 17:30:28 UTC
Not browser dependent -- tested with both IE6 and Opera 9.5 beta
Comment 2 MER-C 2008-04-07 09:40:42 UTC
Wikitext to reproduce:

[[Image:Example.png|thumb|left|200px|Caption.]]
Non-indented text.

:This text is indented one step (supposedly).

::This text is indented two steps (supposedly).

*List.
**Sublist.
*:List indent.
*Blah.
#Ordered list.
#2nd item.

<br clear=all>

On the English Wiki (see [[User:MER-C/Sandbox]]) the above fails to indent at all. On the Test Wiki (see [[testwiki:User:MER-C/Sandbox]]) the result is slightly better but still borked.

The workaround here would be to use a table, but you shouldn't need one.
Comment 3 Derk-Jan Hartman 2010-09-26 22:57:32 UTC
*** Bug 25158 has been marked as a duplicate of this bug. ***
Comment 4 Erwin Dokter 2010-09-27 13:49:09 UTC
That's a CSS float bug. The list items are actually indented, but only relative to the left margin of the page instead of the image. This happens with all indented elements. This cannot be fixed in Mediawiki.
Comment 5 Erwin Dokter 2011-03-06 13:07:23 UTC
Actually, I found out it's not a float bug; it's the default behaviour for list markers. They are placed outside the flow (list-style-position: outside;). Setting list-style-position to inside will put the markers inside the flow, but that clashes with the design of having them outside. So it's basically a design issue.
Comment 6 Derk-Jan Hartman 2011-12-04 14:20:51 UTC
This is a well known CSS problem. You could say that it is a bit of a flaw/oversight in the design of the CSS standard.
Comment 7 Derk-Jan Hartman 2012-08-26 12:36:51 UTC
Been playing around a bit, and something like:

#mw-content-text ol,
#mw-content-text ul,
#mw-content-text dl {
overflow: hidden;
list-style-position: inside;

}

#mw-content-text li,
#mw-content-text dd {
padding-left: 1.5em;
text-indent: -1.5em;
}

	/* Correct directionality when page dir is different from site/user dir */
	.mw-content-ltr ul,
	.mw-content-rtl .mw-content-ltr ul {
		/* @noflip */
		margin: 0.3em 0 0 0.6em;
		padding: 0;
	}
	.mw-content-rtl ul,
	.mw-content-ltr .mw-content-rtl ul {
		/* @noflip */
		margin: 0.3em 0.6em 0 0;
		padding: 0;
	}
	.mw-content-ltr ol,
	.mw-content-rtl .mw-content-ltr ol {
		/* @noflip */
		margin: 0.3em 0 0 2.2em;
		padding: 0;
	}
	.mw-content-rtl ol,
	.mw-content-ltr .mw-content-rtl ol {
		/* @noflip */
		margin: 0.3em 2.2em 0 0;
		padding: 0;
	}
	/* @noflip */
	.mw-content-ltr dd,
	.mw-content-rtl .mw-content-ltr dd {
		margin-left: 0.6em;
		margin-right: 0;
	}
	/* @noflip */
	.mw-content-rtl dd,
	.mw-content-ltr .mw-content-rtl dd {
		margin-right: 0.6em;
		margin-left: 0;
	}


Actually comes quite close. The problem is that it significantly changes the layout of all these elements. hlist on en.wp for instance was immediately troubled by it. Additionally, long lists wouldn't flow around the floating element anymore, but always be as a block to the right of it.
Comment 8 Erwin Dokter 2012-08-26 13:37:12 UTC
It has other problems too, especially on talk pages where all indents are now misaligned (due to not adhering to the default 1.6/3.2em indent space). Also, list-style-position: inside; casues numbered lists to align the list markers to be *left* and push the items to the right as number of digits increase, which is also rahter unsightly.
Comment 9 Derk-Jan Hartman 2012-10-07 13:27:09 UTC
For future reference, English Wikipedia now has the template Flowlist that can be used to workaround this problem selectively.

https://en.wikipedia.org/wiki/Template:Flowlist
Comment 10 Erwin Dokter 2012-10-07 21:31:58 UTC
Suggest we close this, as I can't imagine a nice CSS solution for core.
Comment 11 Derk-Jan Hartman 2013-05-20 12:41:47 UTC
*** Bug 48322 has been marked as a duplicate of this bug. ***

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links