Javascript menu issue

[biome.pat]

Hey all!
I'm trying to use the rollover.js script that is used so wonderfully on vBstyles.com, and I've had it working on one incarnation of my own style, but then when I did up a new header menu, I started getting this problem. The only thing I changed was that I slimmed down the banner (32 px height down to 18 px), and changed the links (no longer "usercp", "register", etc, but simpler custom ones instead).

So now when the pages load, the table that the menu exists in is 3 pixels too large, so it repeats a bit below. What's odd is that once I rollover all the buttons, the 3 pixels disappear and it goes back to how it should look. The only thing that fixes the problem is if I make the actual image height (in the IMG tag) 3 pixels smaller. The table then loads the right size, but onmouseover fades in the squashed image (3 px shorter). BAH! Why can't I learn these languages properly?!

Any help would be muchly appreciated!

Here's the relevant code in the "headerinclude" template:

<script language="JavaScript" src="images/biome2_style/misc/rollovers.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">
<!--
JSFX.Rollover("basics", "images/biome2_style/02/misc/basics_over.gif");
JSFX.Rollover("connections", "images/biome2_style/02/misc/connections_over.gif");
JSFX.Rollover("contact", "images/biome2_style/02/misc/contact_over.gif");


//-->
</script>


And here's the relevant code in the "header":

<!-- nav buttons bar -->
<table height="18" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" style="background-image:url(images/biome2_style/02/misc/nav_bg.gif)">
<tr>
<!-- Basics -->
<td width="141">
<table width="141" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background:#FFFFFF url(images/biome2_style/02/misc/basics.gif);">
<a href="blah"
onmouseover="JSFX.fadeIn('basics')"
onmouseout="JSFX.fadeOut('basics')"><img
src="images/biome2_style/02/misc/basics.gif"
name="basics"
width="141"
height="18" <!-- If I made this "15", it would load correctly, but mouseover wrong -->
border="0"
class="imgFader"
id="basics"
alt="" />
</a>
</td>

</tr>
</table>
</td>
<td width="2">
<img src="images/biome2_style/02/misc/nav_space.gif" width="2" height="18" border="0" alt="" />
</td>
<!-- / Basics -->
<!-- Connections -->
<td width="194">
<table width="194" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background:#FFFFFF url(images/biome2_style/02/misc/connections.gif);">

<a href="blah"
nmouseover="JSFX.fadeIn('connections')"
onmouseout="JSFX.fadeOut('connections')"><img
src="images/biome2_style/02/misc/connections.gif"
name="connections"
width="194"
height="18"
border="0"
class="imgFader"
id="connections"
alt="" />
</a>
</td>
</tr>
</table>
</td>
<td width="2">
<img src="images/biome2_style/02/misc/nav_space.gif" width="2" height="18" border="0" alt="" />
</td>
<!-- / Connections -->
<!-- Contact -->

<td width="138">
<table width="138" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background:#FFFFFF url(images/biome2_style/02/misc/contact.gif);">
<a href="blah"
onmouseover="JSFX.fadeIn('contact')"
onmouseout="JSFX.fadeOut('contact')"><img
src="images/biome2_style/02/misc/contact.gif"
name="contact"
width="138"
height="18"
border="0"
class="imgFader"
id="contact"
alt="" />
</a>
</td>
</tr>
</table>

</td>
<td width="2">
<img src="images/biome2_style/02/misc/nav_space.gif" width="2" height="18" border="0" alt="" />
</td>
<!-- / Contact -->
</tr>
</table>
<!-- / nav buttons bar -->


Oh, and the link is: http://biome.chass.utoronto.ca/forums2/