* Fix up the TOC markup a bit.

Moved the outer box back from <div> to <table>, as the inline-size
workarounds would break a lot of pages which use floated-right
sidebars.

Make TOC styles available as a class .toc, so the #toc doesn't need
to be (ab)used to create alternates with the same style.

diff --git a/includes/ImagePage.php b/includes/ImagePage.php
index e4747a3..4560214 100644 (file)
--- a/includes/ImagePage.php
+++ b/includes/ImagePage.php
@@ -56,12 +56,12 @@ class ImagePage extends Article {
        function showTOC() {
                global $wgOut, $wgShowEXIF, $wgLang;
                
-               $r= '<div class="imagepagetoc"><table id="toc" border="0"><tr><td valign="top"><b>'.wfMsg( 'toc' ).'</b><br />';
-               $r .= '<a href="#toc">'        . $wgLang->getNStext( NS_IMAGE ) . '</a href> - ';
-               $r .= '<a href="#imghistory">' . wfMsg( 'imghistory' ) . '</a href> - ';
-               $r .= '<a href="#imagelinks">' . wfMsg( 'imagelinks' ) . '</a href>';
+               $r= '<div class="imagepagetoc"><table class="toc"><tr><td><b>'.htmlspecialchars( wfMsg( 'toc' )) .'</b><br />';
+               $r .= '<a href="#toc">'        . htmlspecialchars( $wgLang->getNStext( NS_IMAGE ) ) . '</a> - ';
+               $r .= '<a href="#imghistory">' . htmlspecialchars( wfMsg( 'imghistory' ) ) . '</a> - ';
+               $r .= '<a href="#imagelinks">' . htmlspecialchars( wfMsg( 'imagelinks' ) ) . '</a>';
                if ( $wgShowEXIF ) {
-                       $r .= ' - <a href="#exifdata">' . wfMsg( 'exifdata' ) . '</a>';
+                       $r .= ' - <a href="#exifdata">' . htmlspecialchars( wfMsg( 'exifdata' ) ) . '</a>';
                }
 
                        

diff --git a/includes/Linker.php b/includes/Linker.php
index dcd9cc0..c65aa6d 100644 (file)
--- a/includes/Linker.php
+++ b/includes/Linker.php
@@ -718,18 +718,17 @@ class Linker {
 
        /** @todo document */
        function tocList($toc) {
-               return "<div id='toc'>\n" 
+               return "<table id='toc' class='toc'><tr><td>" 
                           . "<div id='toctitle'><h2>" . wfMsg('toc') . "</h2></div>\n"
                     . $toc
-                                . "</ul>\n</div>\n"
+                                . "</ul>\n</td></tr></table>\n"
                                 . '<script type="text/javascript">'
                                 . ' if (window.showTocToggle) {'
                                 . ' var tocShowText = "' . addslashes( wfMsg('showtoc') ) . '";'
                                 . ' var tocHideText = "' . addslashes( wfMsg('hidetoc') ) . '"; '
                                 . ' showTocToggle();'
                                 . ' } '
-                                . '</script>'
-                                . "<div class='visualClear'></div>\n";
+                                . "</script>\n";
        }
 
        /** @todo document */

diff --git a/skins/common/common.css b/skins/common/common.css
index 8ff514b..1eac63d 100644 (file)
--- a/skins/common/common.css
+++ b/skins/common/common.css
@@ -100,51 +100,38 @@ img { border: none; }
 img.tex { vertical-align: middle; }
 span.texhtml { font-family: serif; }
 
-/* IE/mac fixes */
-#toc {
-  display: inline-table;
-}
-#toc h2, #toc div, #toc ul, #toc li {
-  float: left;
-  clear: left;
-}
-@media all {
-  #toc {
-    display: block;
-    text-align: center;
-  }
-  #toc * {
-    float: none!important;
-  }
-}
-/* end IE/mac fixes */
 
-#toc {
-    border: 1px solid #88a;
-    background-color: #f7f8ff;
-    padding: 5px;
-    font-size: 95%;
-    float: left;
+#toc,
+.toc {
+       border: 1px solid #bba;
+       background-color: #f7f8ff;
+       padding: 5px;
+       font-size: 95%;
+       text-align: center;
 }
-#toc h2 {
-    display: inline;
-    border: none;
-    padding: 0;
-    font-size: 100%;
-    font-weight: bold;
+#toc h2,
+.toc h2 {
+       display: inline;
+       border: none;
+       padding: 0;
+       font-size: 100%;
+       font-weight: bold;
 }
-#toc ul {
-    list-style-type: none;
-    list-style-image: none;
-    margin-left: 0;
-    padding-left: 0;
-    text-align: left;
+#toc ul,
+.toc ul {
+       list-style-type: none;
+       list-style-image: none;
+       margin-left: 0;
+       padding-left: 0;
+       text-align: left;
 }
-#toc ul ul {
-    margin: 0 0 0 2em;
+#toc ul ul,
+.toc ul ul {
+       margin: 0 0 0 2em;
 }
-#toc .toctoggle {
-    font-size: 95%;
+#toc .toctoggle,
+.toc .toctoggle {
+       font-size: 94%;
 }
 
 
@@ -324,3 +311,38 @@ li span.deleted {
        color: #888;
        font-style: italic;
 }
+
+
+/* Classes for EXIF data display */
+table.exif {
+       margin-left: 0.5em;
+}
+
+table.exif caption { font-weight: bold; }
+table.exif th { font-weight: normal; }
+table.exif td { padding: 0.1em; }
+
+table.exif {
+       border: none;
+       border-collapse: collapse;
+}
+table.exif td, table.exif th {
+       border: 1px solid #aaaaaa;
+       padding-left: 4px;
+       padding-right: 4px;
+}
+table.exif th {
+       background-color: #f9f9f9;
+}
+table.exif td {
+       background-color: #fcfcfc;
+}
+table.exif td.spacer {
+       background: inherit;
+       border-top: none;
+       border-bottom: none;
+}
+
+.visualClear {
+    clear: both;
+}

diff --git a/skins/monobook/main.css b/skins/monobook/main.css
index 66c645a..788368f 100644 (file)
--- a/skins/monobook/main.css
+++ b/skins/monobook/main.css
@@ -311,62 +311,38 @@ table.small {
 ** content styles
 */
 
-/* IE/mac fixes */
-#toc {
-  display: inline-table;
-}
-#toc div, #toc h2, #toc ul, #toc li, #toc a {
-  float: left;
-  clear: left;
-}
-#toc .toctoggle * {
-  float: none;
-  clear: none;
-}
-#toc h2 {
-  margin-right: .3em;
-}
-@media all {
-  #toc {
-    display: block;
-    text-align: center;
-  }
-  #toc * {
-    float: none !important;
-  }
-  #toc h2 {
-    margin-right: 0;
-  }
+#toc,
+.toc {
+       border: 1px solid #aaa;
+       background-color: #f9f9f9;
+       padding: 5px;
+       font-size: 95%;
+       text-align: center;
 }
-/* end IE/mac fixes */
-
-#toc {
-    border: 1px solid #aaa;
-    background-color: #f9f9f9;
-    padding: 5px;
-    font-size: 95%;
-    float: left;
+#toc h2,
+.toc h2 {
+       display: inline;
+       border: none;
+       padding: 0;
+       font-size: 100%;
+       font-weight: bold;
 }
-#toc h2 {
-    display: inline;
-    border: none;
-    padding: 0;
-    font-size: 100%;
-    font-weight: bold;
+#toc ul,
+.toc ul {
+       list-style-type: none;
+       list-style-image: none;
+       margin-left: 0;
+       padding-left: 0;
+       text-align: left;
 }
-#toc ul {
-    list-style-type: none;
-    list-style-image: none;
-    margin-left: 0;
-    padding-left: 0;
-    text-align: left;
+#toc ul ul,
+.toc ul ul {
+       margin: 0 0 0 2em;
 }
-#toc ul ul {
-    margin: 0 0 0 2em;
+#toc .toctoggle,
+.toc .toctoggle {
+       font-size: 94%;
 }
-#toc .toctoggle {
-     font-size: 94%;
- }
 
 
 /* images */
@@ -1144,6 +1120,6 @@ table.exif td.spacer {
        text-indent: -2em;
 }
 
-div.imagepagetoc table {
+div.imagepagetoc table.toc {
        margin-bottom: 1em;
 }