On Thu, 28 Apr 2005 16:04:49 +0200, in
comp.infosystems.
www.authoring.stylesheets you wrote:
Els wrote:I am trying to add a background to a cell that contains multiple
horizontal coloured layers on top of eachother.
There are two problem in firefox. The first is that the coloured divs
are not visible.
That's because you have z-index:-1. Take the z-index off, and you'll
see the colours.
Okay, but then I won't be able to see the text :)
I want to push the div's behind the text.
I guess you'll have to add z-index +1 to the text then, and give the
div's z-index 0.
The second is that the absolute div is taking 100%
width and height of the complete window, instead of the containing
block.
That's because you gave it position:absolute, which takes it out of
the normal flow.
Yes, I wanted to take it out of the normal flow so I could overlay the
text on it.
I have set the cell to position relative so that the div would be
the containg clock.
No, it isn't the containing block, it's only the block to which it's
relatively positioned.
But 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.
So the TD should be the containing block.
Right?
Not sure - it may be called a containing block, but obviously, the
divs don't stay inside of it. Haven't done an in-depth study of it :-)
Why don't you just give the td a background image like so:
http://locusmeus.com/test/robert.html
Because the table is dynamically created and each cell may contain more
than 2 colours where each has a different percentage. We are actually
determining how far we can go in converting a Java swing application
into a HTML web application.
Okay, in that case it's more complicated.
Not impossible though - I've updated the same file:
http://locusmeus.com/test/robert.html
The only drawback I can see so far is the positioning of the '333'
height wise. If the height of the cell would always be 50px, then
line-height:50px gives the number the right height. But when enlarging
the font, it doesn't stay on the same level compared to the rest of
the numbers in the cells.
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
