Topic: Table . . . image alignment problems

Please help me understand why I always have this problem and how to fix it.

PROBLEM PAGE HERE.

As you can see I am ending up with a gap in the image to the left of the cell with the <ul>.

This started out fine, but I am having to add the list of items "home teater, lighting etc" and I wanted to just use text instead of another graphic.

I know it has to do with the length of the <ul>, but it seems there should be a way to fix it without putting in another spacer.gif or something.

I tired 'valign="top"' for both the <td> and the <img> but that doesn't seem to help.

It seem I ALWAYS have this problem with tables -- %$@! -- but I can't seem to find an explaination or a sure fired way of fixing it. Can anyone Please help me understand how to fix it and avoid the same problem over and over!?

The section of the code is below.

THX much


<tr>
<td width="20">
<img src="images/spacer.gif" width="20" height="40" alt="" /></td>
<td width="245" valign="top">
<img src="images/TempPage_15.jpg" width="245" height="40" alt="" /></td>
<td width="55" valign="top">
<img src="images/TempPage_16.jpg" width="55" height="40" alt="" /></td>

<td rowspan="2" colspan="2" width="259" valign="top" align="left">
<br /><b class="list">
<ul>
<li>Home Theatre</li>
<li>Lighting</li>
<li>Sound</li>
<li>Automation</li>
<li>Communication </li>
<li>Security</li>
</ul>
</b></td>

</tr>
<tr>
<td valign="top">
<img src="images/spacer.gif" width="20" height="75" alt="" /></td>

<td valign="top"> <img src="images/TempPage_21.jpg" width="245" height="75" alt="" align="top" /></td>
<td valign="top"><img src="images/spacer.gif" width="55" height="75" alt="" /></td>
</tr>

Set the border to "1" when you search for the problem. That should help

Try adding valign="top" to the <tr> instead. Been a while, but that may work...

TR's aren't supposed to have any attributes, and I'm 99% sure you never *need* to give them any to acheive a certain effect, so as a rule of thumb, I never specify any attributes on TRs.

However, setting the height for every table cell may work.

And definitely, as HZR suggested, when you're trying to figure out a table problem, set border="1" so that you can see which are the exact cells with the problems. Or just make a bookmark with this URL:

javascript:a=document.getElementsByTagName('td');for(b=0;b<a.length;b++){a[b].style.border='1px solid #F00';}void(0);a=document.getElementsByTagName('table');for(b=0;b<a.length;b++){a[b].style.border='1px solid #00F';}void(0);

and you can quickly see all the tables and table cells when you use it.

offtopic, Slime, that's a very nifty trick, Thanx!
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-

Wicked cool, Slime, I love it.



Offbeat, roadside Texas attractions. (A little Google bombing doesn't hurt.)

More handy bookmarklets can be found here: http://www.bookmarklets.com/

www.favelets.com also