Strange behavior experienced when using hide effect

Strange behavior experienced when using hide effect

I have a page with a DIV at the top that is shown and hidden with the
jQueryUI show and hide effects. Underneath it is a TABLE whose
vertical position shifts up and down depending on whether the DIV is
shown or hidden.
In Internet Explorer 7, when the hide animation is just about done,
the TABLE suddenly shifts to a vertical position even lower than when
the DIV is shown but only for a split second after which it returns to
the spot where it should be. This happens no matter what speed I
assign to the effect.
In Firefox 3, when the show animation is in progress, a "memory" of
the TABLE remains within the DIV even as the TABLE itself is visibly
shifting downwards on the page. This only seems to happen when the
table has a lot of row/columns *and* a decent amount of styling
(background colors, padding, alignment, etc.) - if I use a table with
no styling and/or few columns and rows, this behavior doesn't
manifest. It also only happens the first time the show effect occurs.
I've included the complete HTML/JavaScript/CSS below. Thanks for any
help! I need it badly because the real page on which this example is
based is one part of my attempt to convince the company that we should
use jQuery.
<html>
    <head>
<link rel="stylesheet" type="text/css" href="http://
ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-
ui.css"/>
<style type="text/css">
            body { font-family: Calibri, Arial, Helvetica, sans-serif; }
            .data { margin-top: 5px; }
            .data td { padding: 3px 5px; font-size: 10pt; }
            .data th { padding: 3px 5px; background-color: #003399; font-size:
8pt; color: #ffffff; }
        </style>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
            $(document).ready(function() {
                $("#toggler").toggle(function() {
                    $("#hiddenInPlainSight").show("fast");
                }, function() {
                    $("#hiddenInPlainSight").hide("fast");
                });
            });
        </script>
</head>
<body>
    <a id="toggler" href="#">Show</a>
    <div id="hiddenInPlainSight" style="display: none;">
    <div><select size="1"><option>A</option><option>B</
option><option>C</option><option>D</option></select></div>
    <div style="width: 400px; height: 141px; border: solid 1px
#cccccc; padding: 5px; overflow: auto;">Nothing for right now.</div>
<input type="button" value="OK"/><input type="button"
value="Cancel"/>
</div>
<div style="margin-top: 10px;"><input type="text"/> to <input
type="text"/></div>
<table class="data" border="0" cellpadding="0"
cellspacing="0">
    <tbody>
    <tr>
<th>Name</th>
<th>ID</th>
<th>My Opinion</th>
<th>Your Opinion</th>
<th>Original Quantity</th>
<th>Original Price</th>
<th>Discounted Quantity</th>
<th>Discounted Price</th>
<th>Bulk Quantity</th>
<th>Bulk Price</th>
</tr>
<tr>
<td>A</td>
<td>1</td>
<td>Blah blah blah blah blah</td>
<td>Yadda yadda yadda yadda yadda</td>
<td>123</td>
<td>$9.99</td>
<td>123</td>
<td>$9.99</td>
<td>123</td>
<td>$9.99</td>
</tr>
<tr style="background-color: #cccccc;">
<td>B</td>
<td>2</td>
<td>Blah blah blah blah blah</td>
<td>Yadda yadda yadda yadda yadda</td>
<td>123</td>
<td>$9.99</td>
<td>123</td>
<td>$9.99</td>
<td>123</td>
<td>$9.99</td>
</tr>
<tr>
<td>C</td>
<td>3</td>
<td>Blah blah blah blah blah</td>
<td>Yadda yadda yadda yadda yadda</td>
<td>123</td>
<td>$9.99</td>
<td>123</td>
<td>$9.99</td>
<td>123</td>
<td>$9.99</td>
</tr>
<tr style="background-color: #cccccc;">
<td>D</td>
<td>4</td>
<td>Blah blah blah blah blah</td>
<td>Yadda yadda yadda yadda yadda</td>
<td>123</td>
<td>$9.99</td>
<td>123</td>
<td>$9.99</td>
<td>123</td>
<td>$9.99</td>
</tr>
<tr>
<td>E</td>
<td>5</td>
<td>Blah blah blah blah blah</td>
<td>Yadda yadda yadda yadda yadda</td>
<td>123</td>
<td>$9.99</td>
<td>123</td>
<td>$9.99</td>
<td>123</td>
<td>$9.99</td>
</tr>
<tr style="background-color: #cccccc;">
<td>F</td>
<td>6</td>
<td>Blah blah blah blah blah</td>
<td>Yadda yadda yadda yadda yadda</td>
<td>123</td>
<td>$9.99</td>
<td>123</td>
<td>$9.99</td>
<td>123</td>
<td>$9.99</td>
</tr>
</tbody>
</table>
</body>
</html>
--