Ok i have a rollover effect that's set to 35 pixels, but then when you click on it it has a 5px space underneath the image. I then made the image 30 pixels and it is now the right height but the image is stretched.

My code is

Code:
<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
    homebuttonup       = new Image();
    homebuttonup.src   = "http://webuycrap.webs.com/NavigationTop/PNG/Homeoff.png" ;
    homebuttondown     = new Image() ;
    homebuttondown.src = "http://webuycrap.webs.com/NavigationTop/PNG/Homeon.png" ;
}
function buttondown( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "down.src" );
    }
}
function buttonup ( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "up.src" );
    }
}
// -->
</script>
and html is

Code:
<!--Nav Bar-->
<table width=1000 cellpadding=0 cellspacing=0 class="bgrepeat" background="http://webuycrap.webs.com/NavigationTop/Navbg.png">
<tr height=35><td>

<center><table cellpadding=0 cellspacing=0><tr>

<td><a href="index.html"
  onmouseover="buttondown('homebutton')"
  onmouseout="buttonup('homebutton')">
<img src="http://webuycrap.webs.com/NavigationTop/PNG/Homeoff.png" name="homebutton" border="0" height=35 />
</a>
</td>

</tr>
</table></center>
</td></tr>
</table>
Here is a picture of the problem
http://webuycrap.webs.com/Problem.bmp