diff options
Diffstat (limited to 'docs/uidesign/child-selector-emu.html')
| -rw-r--r-- | docs/uidesign/child-selector-emu.html | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/docs/uidesign/child-selector-emu.html b/docs/uidesign/child-selector-emu.html new file mode 100644 index 00000000..8294b6d7 --- /dev/null +++ b/docs/uidesign/child-selector-emu.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Child selector emulation for IE 6</title> + <style type="text/css"> + /** Common rules **/ + body { background-color: #CCC; } + table { border:1px black solid; } + caption { + background-color: #98fb98; + border:1px solid #40FF40; + } + + /** "old" rules" **/ + table.global th, + table.global td + { + border: 1px red solid; + background-color:white; + padding:1em; + } + table.global th + { + background-color: #ffc0cb; + } + + /** second table. Try to emulate child selector */ + table.childemu th, + table.childemu td { + border: 1px red solid; + background-color:white; + padding:1em; + } + table.childemu th + { + background-color: #ffc0cb; + } + + /** Reset style applied in childemu classes */ + /** TODO: find the real default value!! */ + table.childemu tr * th, + table.childemu tr * td { + border: none; + background-color: transparent; + padding: 0; + } + + + /** child selector emulation */ + </style> +</head> +<body> +<p> +The following table show how nested tables inherit colors from the wikitable class (here it was renamed "global"). +</p> +<table class="global"> +<caption>Global table</caption> +<tr> + <th>TH: should have pink bg</th> +</tr> +<tr> + <td>TD: white bg</td> +</tr> +<tr> + <td> + <table class="nested"> + <caption>Nested table</caption> + <tr> + <th>Nested TH: transparent</th> + <td>Nested TD: transparent</td> + </tr> + </table> + </td> +</tr> +</table> + +<p> +With child selector we could limit the wikitable styling to the direct childs of the table. Unfortunately, Internet Explorer 6.0 does not support child selector. See <a href="https://bugzilla.wikimedia.org/show_bug.cgi?id=33752">our bug #33752</a>. +</p> +<table class="childemu"> +<caption>Global table</caption> +<tr> + <th>TH: should have pink bg</th> +</tr> +<tr> + <td>TD: white bg</td> +</tr> +<tr> + <td> + <table class="nested"> + <caption>Nested table</caption> + <tr> + <th>Nested TH: transparent</th> + <td>Nested TD: transparent</td> + </tr> + </table> + </td> +</tr> +</table> +<p><strong>NOTE:</strong>The nested caption keep the green background. The nested table keep the black border. This is because those declarations are global so we did not reset them.</p> + |