mirror of
https://github.com/YunoHost-Apps/mediawiki_ynh.git
synced 2024-09-03 19:46:05 +02:00
100 lines
2.1 KiB
HTML
100 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Child selector emulation for IE 6</title>
|
|
<style>
|
|
/** 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>
|