Tables giver problemer

Her er et lille udsnit af koden:

<table width="100%" border="0" align="center" cellspacing="0" cellpadding="0">
<tr>
<th><img src="Images\logo.jpg"></th>
</tr>
<tr>
 
  <!-- Navigation -->
 
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Images/hnav_left.gif"/></td>
<td class="hnavbg" align="center"><script>document.write('<scr'+'ipt src="Images/navbar.js">'+'</scr'+'ipt>');</script></td>
<td><img src="Images/hnav_right.gif"/></td>
</tr>
</table>
(...)

.hnavbg
{
    background-image: url(Images/hnav_bg.gif);
    background-repeat: repeat-x;
}



Problemet er med begyndelsen og slutningen af navigations menuen. Af en eller anden grund så laver det første billede (hnav_left.gif) et stort hul imellem billedet og midterste del. Fjerner jeg det første billede er der ingen problemer
Det samme sker så efter det sidste billede, hvor der så er et stort tomt hul over til kanten af skærmen