CSS parent problem

[Sebastian Stein]

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

[Steve Pugh]

Sebastian Stein <se*******@gmx.de> wrote:

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>,
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.
but the image is
positioned absolute to the <table>.
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.
Furthermore the image is not horizontal center aligned anymore.
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?
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?!

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 <st***@pugh.net> <http://steve.pugh.net/>

[Sebastian Stein]

Steve Pugh <st***@pugh.net> wrote:

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

I expected that the parent of this image is the <td>,

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.

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.

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?!

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

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

Sebastian