Last modified: 2013-05-20 12:42:51 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
Not browser dependent -- tested with both IE6 and Opera 9.5 beta
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.
*** Bug 25158 has been marked as a duplicate of this bug. ***
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.
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.
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.
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.
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.
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
Suggest we close this, as I can't imagine a nice CSS solution for core.
*** Bug 48322 has been marked as a duplicate of this bug. ***
