Hej,

I have a table with 1 row and 2 columns. In both columns are images below each
other. In the right cell are less images, so the height of this cell is
smaller.

Anyway, I want a navigation image at the bottom of both cells. Both cells share
the same CSS class "menubar":

td.menubar
{
background-color: white;
height: 100%;
text-align: center;
vertical-align: top;
}

This works, both cells are expanded to the same height. Now I add several image
to the cells, no problem so far. At the end of each cell I add the navigation
image and give it a CSS class bottom_btn:

..bottom_btn
{
position: absolute;
margin: 5px 0px;
bottom: 0px;
}

I expected that the parent of this image is the <td>, but the image is
positioned absolute to the <table>. Furthermore the image is not horizontal
center aligned anymore.

<table id="content">
<tr>
<td class="menubar">
<img src ...>
<img src ...>
<img src ...>
<img src ...>

<img src="img/links.gif" width="25" height="20" class="bottom_btn" />

</td>

<td class="menubar">
<img src ...>
<img src ...>

<img src="img/links.gif" width="25" height="20" class="bottom_btn" />

</td>
</tr>
</table>

And here another part of the CSS:

#content
{
width: 100%;
}

For the document I'm using XHTML 1.0 Transitional. The document is valid
(w3.org) as well as the CSS (w3.org). I think I have a logical error, does
anybody see it?!

Sebastian

Sebastian Stein <seb_stein@gmx.de> wrote:
[color=blue]
>I have a table with 1 row and 2 columns. In both columns are images below each
>other. In the right cell are less images, so the height of this cell is
>smaller.
>
>Anyway, I want a navigation image at the bottom of both cells. Both cells share
>the same CSS class "menubar":
>
>td.menubar
>{
> background-color: white;
> height: 100%;
> text-align: center;
> vertical-align: top;
>}
>
>This works, both cells are expanded to the same height. Now I add several image
>to the cells, no problem so far. At the end of each cell I add the navigation
>image and give it a CSS class bottom_btn:
>
>.bottom_btn
>{
> position: absolute;
> margin: 5px 0px;
> bottom: 0px;
>}
>
>I expected that the parent of this image is the <td>,[/color]

It is, but as you absolutely position it that no longer plays any part
in its presentation. Unless the <td> is also its containing block, and
based on the styles you've given here the <td> is not a containing
block.
[color=blue]
>but the image is
>positioned absolute to the <table>.[/color]

Unless the table is a containing block that's not true. What is the
value of the position property of the table?

Most likely the containing block is the initial containing block.
[color=blue]
>Furthermore the image is not horizontal center aligned anymore.[/color]

Nor should it be. You've told the image to be absolutely positioned
but you haven't specifed a value for left or right to it defaults to
left: 0;

In fact with the styles you've given here both images will be
displayed at the same location. So why not get rid of one of them?
[color=blue]
>For the document I'm using XHTML 1.0 Transitional. The document is valid
>(w3.org) as well as the CSS (w3.org). I think I have a logical error, does
>anybody see it?![/color]

You've misunderstood how absolute positioning works. See
http://www.w3.org/TR/CSS21/visuren.h...te-positioning and in
particular http://www.w3.org/TR/CSS21/visudet.html#x0

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

Steve Pugh <steve@pugh.net> wrote:[color=blue][color=green]
>>.bottom_btn
>>{
>> position: absolute;
>> margin: 5px 0px;
>> bottom: 0px;
>>}
>>
>>I expected that the parent of this image is the <td>,[/color]
>
> It is, but as you absolutely position it that no longer plays any part
> in its presentation. Unless the <td> is also its containing block, and
> based on the styles you've given here the <td> is not a containing
> block.[/color]

Ok, I see now, absolute only means absolutely to the last containing block. I
thought the parent is always the last containing block. As I see it now I only
have one possibility: Make the table cell also a containing block. If I
understood it correctly, it only becomes a containing block, if it is
positioned absolutely. But this is, of course, not what I want. So I'm looking
for another easy solution. Maybe I have to rethink the whole design. Maybe you
know a better solution for my initial design problem.
[color=blue][color=green]
>>For the document I'm using XHTML 1.0 Transitional. The document is valid
>>(w3.org) as well as the CSS (w3.org). I think I have a logical error, does
>>anybody see it?![/color]
>
> You've misunderstood how absolute positioning works. See
> http://www.w3.org/TR/CSS21/visuren.h...te-positioning and in
> particular http://www.w3.org/TR/CSS21/visudet.html#x0[/color]

I think I just have not understood it yet, I just started to look into CSS two
days ago.

Sebastian