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

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;
 }