Forum Moderators: not2easy
I am trying to add a background to a cell that contains multiple horizontal coloured layers on top of eachother. The table will be generated dynamically, so I don't know about the number of layers or colours in advance.
I managed to do this in IE, but firefox displays something very different so I would like to know if my HTML is in error or firefox.
This is my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...
<style>
table {border-collapse: collapse;width: 300px;}
td {border-style: solid; border-width: 1px; border-color: gray;}
</style>
...
<table>
<tr><td>1</td><td>22</td>
<td style="position: relative; width: 20%; padding: 0px; height: 50px">
<div style="position: absolute; width: 100%; height: 100%; z-index: -1">
<div style="background-color: pink; width: 100%; height: 50%"></div>
<div style="background-color: cyan; width: 100%; height: 50%"></div>
</div>
<div>
333
</div>
</td>
</tr>
</table>
...
There are two problem in firefox. The first is that the coloured divs are not visible.
But the most important problem is that
the absolute div is taking 100% width and height of the complete window,
instead of the containing block. I have set the cell to position relative so that the div would be the containg block.
The W3C spec says that:
The containing block of an element is defined as follows:
(4)If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed', in the following way:
(4-2)not inline -> the containing block is formed by the padding edge of the ancestor.
[w3.org...]
[w3.org...]
Hope that someone can tell me that my HTML/CSS is wrong and tell me why.
I am no CSS guru but this makes no sense to me.
Kaled.
here's how it shoud work
<style>
table {border-collapse: collapse;width: 300px;}
td {border-style: solid; border-width: 1px; border-color: gray;}
</style>
<table>
<tr><td>1</td><td>22</td>
<td style="width: 20%; height: 50px;padding:0" >
<div style="position: relative; height: 100%";>
<div style="position: absolute; width: 100%; height: 100%;top:0;left:0">
<div style="background-color: pink; width: 100%; height: 50%"></div>
<div style="background-color: cyan; width: 100%; height: 50%"></div>
</div>
<div style="position: absolute; width: 100%; height: 100%;top:0;left:0">
333
</div>
</div>
</td>
</tr>
</table>
Now I read at W3C that the effect of position: relative on a table-cell is undefined, so I guess Firefox doesn't break the rules.
