table quirk when trying to place an image, then replace it dynamically

[bragan]

I've spent a lot of time getting spanked by this table and I am grateful for any help...

basically, I can't figure out how to eliminate the blank space between the bottom of the photo and the black bar.

Also, normally in the space where the photo lives, I am using javascript to bring in a photo that might be horizontal or vertical, and has no consistent size. My goal is to center it and align it with the top of the cell. How can I keep the cell size the same so the navigation elements below the photo don't jump around when a new image of a new size is loaded?

i'm building for IE 5+ on PC and Safari and IE 5.2 on mac OS 9 and 10.

thanks so much for any help...here's the basic code I'm wrestling with:

<table cellpadding="0" cellspacing="0">
<tr>
 <td bgcolor="#d2d3d4" width="20" rowspan="5" valign="top"><img src="images/graphics/spacer.gif" width="12" height="415">
</td>
<td colspan="5" valign="top" bgcolor="#d2d3d4" align="center"><img src="images/cooked_fish.jpg">
</td>
 <td width="20" bgcolor="#d2d3d4" rowspan="4" valign="top"><img src="images/graphics/spacer.gif" width="12" height="0"></td>
</tr>
<tr>
<td valign="center" bgcolor="#000835" colspan="2" width="280"></td>
 <td height="19" colspan="3" valign="top" bgcolor="#009342">enlarge</td>
 </tr>
 <tr> 
 <td height="1" bgcolor="#4a4a4a" colspan="5"></td>
 </tr>
 <tr>
 <td bgcolor="#d2d3d4" valign="top" width="280">&nbsp;
 <img src="images/graphics/spacer.gif" width="280" height="1" border="0"> 
 </td>
<td bgcolor="#d2d3d4"><img src="images/graphics/spacer.gif" width="20" height="1" border="0"> 
</td>
 <td bgcolor="#d2d3d4" valign="top" align="right"><img src="images/graphics/spacer.gif" width="1" height="2" border="0"> 
 &lt;</td>
 <td bgcolor="#d2d3d4" valign="top" align="center"><img src="images/graphics/spacer.gif" width="40" height="14"> 
 &nbsp;</td>
 <td bgcolor="#d2d3d4" valign="top"><img src="images/graphics/spacer.gif" width="1" height="2" border="0"> 
 &gt;</td>
 </tr>
</table>

thanks,
brian

[MozMan]

brian-

This is probably not the best way to handle it, but the first thing that comes to mind that might work is to embed a single-celled table in the cell where you will place the picture, then put the picture in the new table. That way, your primary table will never adjust for content.

[tedster]

I think that's a decent idea for this particular template. Nest a 3x3 table inside that <td> and give the nested table some spacer gifs in the cells that surround the center cell, which will be the holder for your images. Nothing can collapse in any browser like that.

[bragan]

thank you! a variation on that did the trick. thanks a lot...

brian