From b7952849731512c9258e6e37cfd155e830a00fff Mon Sep 17 00:00:00 2001
From: Derk-Jan Hartman <hartman.wiki@gmail.com>
Date: Thu, 22 Aug 2013 21:32:32 +0200
Subject: [PATCH] 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
---
 skins/common/commonContent.css | 19 +++++++++++++------
 skins/common/oldshared.css     |  4 ++++
 skins/modern/main.css          |  4 ++++
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/skins/common/commonContent.css b/skins/common/commonContent.css
index de47157e32..14d39b929f 100644
--- 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 b68a9964e7..eea8b8eead 100644
--- 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 1466710173..47c320b89b 100644
--- 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;
 }
 
-- 
2.20.1