absolute div in table cell

[Robert]

Hi,

I am trying to add a background to a cell that contains multiple
horizontal coloured layers on top of eachother.

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

http://www.xs4all.nl/~rvanloen/example/table.html

There are two problem in firefox. The first is that the coloured divs
are not visible. The second 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 clock.

http://www.w3.org/TR/CSS21/visuren.html#propdef-position

http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

Hope that someone can tell me that my HTML/CSS is wrong and tell me why.

[Els]

Re: absolute div in table cell

Robert wrote:
[color=blue]
> Hi,
>
> I am trying to add a background to a cell that contains multiple
> horizontal coloured layers on top of eachother.
>
> 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
>
> http://www.xs4all.nl/~rvanloen/example/table.html
>
> There are two problem in firefox. The first is that the coloured divs
> are not visible.[/color]

That's because you have z-index:-1. Take the z-index off, and you'll
see the colours.
[color=blue]
> The second is that the absolute div is taking 100%
> width and height of the complete window, instead of the containing
> block.[/color]

That's because you gave it position:absolu te, which takes it out of
the normal flow.
[color=blue]
> I have set the cell to position relative so that the div would be
> the containg clock.[/color]

No, it isn't the containing block, it's only the block to which it's
relatively positioned.

Why don't you just give the td a background image like so:

http://locusmeus.com/test/robert.html

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Robert]

Re: absolute div in table cell

Hi Els,

Els wrote:[color=blue][color=green]
>>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.[/color]
>
>
> That's because you have z-index:-1. Take the z-index off, and you'll
> see the colours.[/color]

Okay, but then I won't be able to see the text :)
I want to push the div's behind the text.
[color=blue][color=green]
>>The second is that the absolute div is taking 100%
>>width and height of the complete window, instead of the containing
>>block.[/color]
>
>
> That's because you gave it position:absolu te, which takes it out of
> the normal flow.[/color]

Yes, I wanted to take it out of the normal flow so I could overlay the
text on it.
[color=blue][color=green]
>>I have set the cell to position relative so that the div would be
>>the containg clock.[/color]
>
>
> No, it isn't the containing block, it's only the block to which it's
> relatively positioned.[/color]

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?
[color=blue]
> Why don't you just give the td a background image like so:
>
> http://locusmeus.com/test/robert.html[/color]

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.

[Els]

Re: absolute div in table cell

On Thu, 28 Apr 2005 16:04:49 +0200, in
comp.infosystem s.www.authoring.stylesheets you wrote:
[color=blue]
> Els wrote:[color=green][color=darkred]
>>>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.[/color]
>>
>> That's because you have z-index:-1. Take the z-index off, and you'll
>> see the colours.[/color]
>
> Okay, but then I won't be able to see the text :)
> I want to push the div's behind the text.[/color]

I guess you'll have to add z-index +1 to the text then, and give the
div's z-index 0.
[color=blue][color=green][color=darkred]
>>>The second is that the absolute div is taking 100%
>>>width and height of the complete window, instead of the containing
>>>block.[/color]
>>
>> That's because you gave it position:absolu te, which takes it out of
>> the normal flow.[/color]
>
> Yes, I wanted to take it out of the normal flow so I could overlay the
> text on it.
>[color=green][color=darkred]
>>>I have set the cell to position relative so that the div would be
>>>the containg clock.[/color]
>>
>> No, it isn't the containing block, it's only the block to which it's
>> relatively positioned.[/color]
>
> 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?[/color]

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 :-)
[color=blue][color=green]
>> Why don't you just give the td a background image like so:
>>
>> http://locusmeus.com/test/robert.html[/color]
>
> 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.[/color]

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 -

[Robert]

Re: absolute div in table cell

>>But the W3C spec says that:[color=blue][color=green]
>>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?[/color]
>
>
> 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 :-)[/color]

They do stay inside with IE. Could it possibly be that Microsoft did
something right this time? :p
[color=blue]
> Okay, in that case it's more complicated.
> Not impossible though - I've updated the same file:
> http://locusmeus.com/test/robert.html[/color]

Ok interesting. You made the text absolute instead of the colours, so
that the text will be in front. And set the line-height so the span
would not go outside the cell. I don't see the problem when I make the
font bigger.

I don't like that I have to set the height in so many places, but it
does give some possibilities.

Thanks.