[MediaWiki-l] CSS challenge -- Wikivoyage Table of Contents (TOC)

roger at rogerchrisman.com roger at rogerchrisman.com
Tue Jan 22 07:23:08 UTC 2013


Hi all,

Over at Wikivoyage, Mediawiki's automatically generated Table of
Contents (TOC) is intentionally floated left (I'm assuming but might
be wrong that this is done with CSS somewhere but I don't know where)
so that page content flows arround it. We do this to get more travel
content and photos onto the first screen of text, and it usually works
fine.

However, when a bullet list flows arround the TOC some weird things happen:
1) The bullets move left more than they should. In Firefox and Chrome
it is only a little and not critical. But in Internet Explorer (I
tested in IE 9.0 on Windows 7) the bullets jump clear across the TOC
box and show in the left edge of the TOC, instead of where they belong
which is outside the right edge of the TOC next to the list items
flowing around the right edge of the TOC.
See first two bullet items on this page:
http://en.wikivoyage.org/wiki/Long_Island
2) Nested lists fail to indent.
3) Lists that flow past the bottom edge of the TOC jump to left margin
at that point which is expected behavior for text but is jarring for a
bullet list to do.

The first two bullet items flowing to right of TOC box in the page
linked to in item 1 above, when viewed in IE 9.0, loose their bullets
which instead show up in the left edge of the TOC.

I enclosed the next bullet list that flows to right of TOC on that
page in a div tag, styled overflow:hidden, which for some reason I
don't understand causes the unorded list's box and the content in it,
including the bullets, to hold their places on the page without
sliding away to the left.

I'm in over my head here--I don't want to do something silly that
could be done better by someone whe knows more about CSS. I'd like to
find an elegant solution that we could implement sitewide at
Wikivoyage.

Could someone knowledgeable about CSS help us out with this over at Wikivoyage?

If you are willing to help us with this CSS puzzle, please give me a
heads up on my Wikivoyage talk page (below my sig) or at this thread
in the Wikivoyage Travelers' Pub:

http://en.wikivoyage.org/wiki/Wikivoyage:Travellers%27_pub#Coding%20error

Thanks!

Roger :-)
http://en.wikivoyage.org/wiki/User:Rogerhc



More information about the MediaWiki-l mailing list