I am developing a small web site, I am trying to achieve a certian look, I will have a list of links, enclosed with a leaf border, see atached example.

I do not want to use CSS positioning, due to browser wars. So I am implementing this effect with a table. It almost works, with the exception that on the right side, is a gap between the right side of the leaf frame, and the linked list.

Some code:

<table cellspacing="0" cellpadding="0" border ="0" align="center">
<tr>

<td rowspan="3" valign="middle">[img]images/leafsleft.jpg[/img]</td>
<td colspan="2"valign="top">[img]images/leafstop.jpg[/img]</td>
<td rowspan="3" valign="middle">[img]images/leafsright.jpg[/img]</td>

</tr>
<tr valign="top">

<td>
<dl>
<dd>Free Backgrounds</dd>
<dd><a href="buttons.shtml" Free Buttons</a></dd>
<dd>Free Graphics</dd>
<dd>Free Animations</dd>
</dl>
</td>

</tr>
<tr>
<td colspan="2">[img]images/leafsbottom.jpg[/img]</td>

</tr>
</table>

I am woundering if someone can spot my mistake.

I do not use wysiwyg editors, I am useing 1st Page 2000