468,110 Members | 1,806 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,110 developers. It's quick & easy.

CSS parent problem

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
Jul 23 '05 #1
2 6098
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/>
Jul 23 '05 #2
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
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by jalkadir | last post: by
2 posts views Thread by dannielum | last post: by
3 posts views Thread by Eddie | last post: by
4 posts views Thread by Richard Lewis Haggard | last post: by
2 posts views Thread by Steven | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.