ToC: Use display:table, so that we can behave like a block element

The downside to inline-block is that you don't clear other inline
elements. Although inline elements surrounding the ToC are rare, they
are common enough that this introduced some problems on English
Wikipedia.

Instead, let's just display as table. This is a block element and has
all the boxmodel behavior that we want (that of a table, an intrinsic
wide block element). It's not the nicest perhaps, but it works in all
modern browsers without known problems as far as I'm aware.

We still fallback to inline mode on browsers that don't properly
support display:table.

Followup to: I4ecd0659d1f955a9b593d281a3fef0a81c218a52
Bug: 658
Change-Id: Ib8e2801f9a143de370589728aad01926906ffae0

diff --git a/skins/common/commonContent.css b/skins/common/commonContent.css
index de47157..14d39b9 100644 (file)
--- a/skins/common/commonContent.css
+++ b/skins/common/commonContent.css
@@ -16,20 +16,27 @@
 }
 
 /**
- * We want to display the ToC element with intrinsic width. There are a few good
- * old ways of making it this way, including floating it or making it a table.
- * Both are clearly suboptimal.
+ * We want to display the ToC element with intrinsic width in block mode. The fit-content
+ * value for width is however not supported by large groups of browsers.
  *
- * Thus we use display: inline-block. It is treated as an inline element with
- * regard to text flow, but this isn't an issue here as the ToC is always
- * sandwiched between other block-level elements.
+ * We use display:table. Even though it should only contain other table-* display
+ * elements, there are no known problems with using this.
+ *
+ * Because IE < 8, FF 2 and other older browsers don't support display:table, we fallback to
+ * using inline-block mode, which features at least intrinsic width, but won't clear preceding
+ * inline elements. In practice inline elements surrounding the TOC are uncommon enough that
+ * this is an acceptable sacrifice.
  */
 #toc,
 .toc {
        display: -moz-inline-block;
        display: inline-block;
+       display: table;
+
+       /* IE7 and earlier */
        zoom: 1;
        *display: inline;
+
        padding: 7px;
 }
 

diff --git a/skins/common/oldshared.css b/skins/common/oldshared.css
index b68a996..eea8b8e 100644 (file)
--- a/skins/common/oldshared.css
+++ b/skins/common/oldshared.css
@@ -124,8 +124,12 @@ img { border: none; }
        text-align: center;
        display: -moz-inline-block;
        display: inline-block;
+       display: table;
+
+       /* IE7 and earlier */
        zoom: 1;
        *display: inline;
+
        padding: 7px;
 }
 /* CSS for backwards-compatibility with cached page renders and creative uses in wikitext */

diff --git a/skins/modern/main.css b/skins/modern/main.css
index 1466710..47c320b 100644 (file)
--- a/skins/modern/main.css
+++ b/skins/modern/main.css
@@ -546,8 +546,12 @@ img.thumbborder {
        border: solid 1px #bbbbbb;
        display: -moz-inline-block;
        display: inline-block;
+       display: table;
+
+       /* IE7 and earliers */
        zoom: 1;
        *display: inline;
+
        padding: 7px;
 }