CSS positioning in a cell

[craigh@mac.com]

Hi, I'm having trouble positioning two graphics in a table cell. I want the header graphic (header_graphic.gif) to appear vertically centered and offset from the left a little and I want the rounded corner graphic (lowerright_big.gif) to be in the lower right corner with nothing outside it. The code below doesn't really make it... on Mozilla, the lower-right corner thing looks ok (on a Mac) but the header is not centered. On IE (for mac) the header is centered but the corner thing is all messed up.
You can see it here:
http://dev.msboa.org/dist5/index2.php
and how I want it to look here:
http://dev.msboa.org/dist5/index.php (I've done this with just graphics).

<TR>
<TD colspan=2 style='background-color:#FF0000; height:100px; border=0;'>
<IMG SRC="header_graphic.gif" ALT="" width="530" height="80" ALIGN="absmiddle" style='padding-left:10px;'>
<img src="lowerright_big.gif" alt="" width="44" height="44" align="bottom" style='float:right;'>
</TD>
</TR>

any ideas?

[Mr J]

<div style="position:absolute;left:0;top:50;width:530;height:80;background-color:#FF0000">
<IMG SRC="header_graphic.gif" ALT="" width="530" height="80">
<div style="position:relative;left:450;top:0"><img src="lowerright_big.gif" alt="" width="44" height="44" align="bottom"></div>
</div>

Play around with the left and top attributes to see if this will do what you want.

[MCookie]

Here's another way to do it. Put your <td><img><img></td> on one line.

<tr>
<td colspan="2" style="background-color:#ff0000;height:100px;border:0px;"><img src="header_graphic.gif" width="530" height="80" style="margin:10px 0px 10px 10px;"><img src="lowerright_big.gif" width="44" height="44" style="margin: 56px 0px 0px 56px;"></td></tr>

[craigh@mac.com]

Great! The first suggestion just completely destroyed the page (sorry!) but the second worked beautifully. Thanks muchly!

craig

[craigh@mac.com]

I'd like to amend my last reply. It really does work well, but one of my goals was to be able to eliminate the width=640 of the table so that the corner graphic would follow the window width. Is there any way to modify the suggestion so that this is possible?

[craigh@mac.com]

ok, I have this now:

<TABLE cellspacing=0 cellpadding=0 style='margin-right:20px;'> <!--WIDTH=640-->
<td colspan="2" style="background-color:#ff0000;height:100px;border:0px;"><img src="header_graphic.gif" width="530" height="80" style="margin:10px 0px 10px 10px;"><img src="lowerright_big.gif" width="44" height="44" style="margin: 56px 0px 0px 56px; float:right;"></td></tr>

you can see where I used to have the width set at 640 and that I added the float:right command. This works well on IE but on Mozilla it looks like it is creating a second line for the second graphic because the cell is obviously larger than 100. Other ideas?

the site is now here: http://dev.msboa.org/dist5/

check it with mozilla.

[MCookie]

Well, this looks fine in Mozilla, but for some reason, leaves a 2px space between the right of the lowerright_big.gif in IE and Opera. Don't know where that comes from.

<tr><td colspan="2" style="background-color:#ffcc00;height:100px;border:0px;"><img src="header_graphic.gif" width="530" height="80" style="margin-left:10px;margin-top:10px;float:left;"><img src="lowerright_big.gif" width="44" height="44" style="margin-top:56px;float:right;"></td></tr>


So, although it has nothing to do with CSS positioning, maybe this nested table is the simple solution that works in all browsers?

<tr><td colspan="2" style="background-color:#ff0000;border:0px;">
<table cellspacing="0" cellpadding="0" width="100%"><tr><td><img src="header_graphic.gif" width="530" height="80" style="margin-left:10px;"></td><td style="vertical-align:bottom;text-align:right;"><img src="lowerright_big.gif" width="44" height="44" style="margin-top:56px;"></td></tr></table>
</td></tr>

[craigh@mac.com]

yes, that works well. Thanks. I guess this is why CSS isn't catching on as fast as the higher-ups would like. :)