Positioning discrepancy between IE and Mozilla Firefox

[Adamn]

I've written a script which uses the visibility:hidden and position:absolute function to hide a drop down menu, and when clicking on the button to activate that drop down, it changes the visibility to visible and position to relative. Clicking on an X in that box will close the menu again.

Something I've noticed is that in IE this works flawlessly, however Mozilla Firefox presents a bit of an issue.

When opening and closing the same drop down repeatedly, it increments the space between the header and the option above it by one pixel every open/close event.

Is there any feasible way to circumvent this?

Here's my JS script, very simple..

//x is turned off, y is turned on
function toggledropdown(x,y){
t=document.getElementById(x).style
t.visibility='hidden'
t.position='absolute'
u=document.getElementById(y).style
u.visibility='visible'
u.position='relative'
}

The table is defined with...


<TABLE WIDTH=100% BORDER=0 cellpadding=0 cellspacing=0>

And here's the CSS/html involved, rather self explanatory...

//INCREMENT HEADER ID AND DEFINE TR TAGS
$headerExpandID++;
$headerTRID = "closedTR".$headerExpandID;
$expandTRID = "openedTR".$headerExpandID;

//THIS IS THE HEADER
echo "<TR id=$headerTRID onclick=toggledropdown('$headerTRID','$expandTRID')><TD WIDTH=100%>";
// HEADER CONTENTS
echo "</TD></TR>";

//THIS IS THE DROPDOWN
echo "<TR id=$expandTRID style=\"position:absolute;visibility:hidden;\"<TD width=100%>";
// DROP DOWN CONTENTS
echo "</TD></TR>";


Attached is an image of the problem. The info under ABSOLUTE is what the expanded menu looks like. The space between Abstract and AGAINST ALL ODDS is the oddity that occurs only in Firefox.

Thanks much!