Restrict CSS matches on .header to not affect <tr>

Pandoc generates <tr class="header"> to hold <th> elements, and
we don't want to make those be display: block.

Signed-off-by: Simon McVittie <smcv@debian.org>

diff --git a/doc/bugs/style.css___40__unnecessarily__41___breaks_pandoc_table_headers.mdwn b/doc/bugs/style.css___40__unnecessarily__41___breaks_pandoc_table_headers.mdwn
index a667bfad9e83cac3043846812d00c897c82c6bb7..aa4eec9040b8c4a09de93136ccea0c4647768ab2 100644 (file)
--- a/doc/bugs/style.css___40__unnecessarily__41___breaks_pandoc_table_headers.mdwn
+++ b/doc/bugs/style.css___40__unnecessarily__41___breaks_pandoc_table_headers.mdwn
@@ -44,3 +44,19 @@ Alternatively, add the following code.
                }
 
 I've added that last code snippet to my `custom.css` file. I admit `.header tr:not(.header)` is not especially elegant, but then again, I have almost no knowledge of CSS. There might be better solutions. (I don't even know why `display: block;` breaks the tables or why changing it to `display: table-header;` doesn't fix it but `display: table-row;` does :D )
+
+> This is essentially a conflict between ikiwiki's expectations for the
+> definitions of CSS classes, and pandoc's expectations. The ikiwiki
+> templates use `class="header"` to mean essentially the same thing
+> as a HTML5 `<header>`, while Pandoc assumes a different meaning.
+>
+> I think `div.header, header.header {` is probably a cleaner fix,
+> and I have [[done]] that.
+>
+> FYI, `display: block` breaks the tables because it makes the `<tr>` not
+> be treated as a table row by the browser's layout engine.
+> `table-header` is not a valid
+> [value for the CSS `display` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+> so that won't work.
+>
+> --[[smcv]]

diff --git a/doc/style.css b/doc/style.css
index f0846c0d651ef63db8a5d6f73a286cb4603326d7..8c16e7a2f9f26e8ef044c15ac3eb17e6454f2bd2 100644 (file)
--- a/doc/style.css
+++ b/doc/style.css
@@ -10,7 +10,7 @@ footer,header,hgroup,menu,nav,section {
        display: block;
 }
 
-.header {
+div.header, header.header {
        margin: 0;
        font-size: 140%;
        font-weight: bold;

diff --git a/themes/actiontabs/style.css b/themes/actiontabs/style.css
index 67720e285cc1eb52270081295b9b9011bf27df18..16e3d984e50f2278d2d7bdcd7f2eb9d436f967c3 100644 (file)
--- a/themes/actiontabs/style.css
+++ b/themes/actiontabs/style.css
@@ -51,7 +51,7 @@ body {
        font-size: 120%;
 }
 
-.header {
+div.header, header.header {
        font-weight: normal;
 }
 

diff --git a/themes/monochrome/style.css b/themes/monochrome/style.css
index e85f8abb55b4ce40e240a54e2105adeb6cb7eef3..aa2ee9445a7c53f78bc9ebdfbe64e180aa49bcb1 100644 (file)
--- a/themes/monochrome/style.css
+++ b/themes/monochrome/style.css
@@ -19,7 +19,7 @@ body {
        font-family: 'Lato', sans-serif;
 }
 
-.header {
+div.header, header.header {
        margin-bottom: 0.5em;
 }
 .pageheader .actions ul {