Spry Tab panels seem to expand my page vertically by hundreds of pixels

Question

I am using the latest version of Spry widgets and on every
page that I have a Tabbed Panel, in Firefox, the page expands
vertically by several hundred pixels, placing my Tabbed Panel at
the bottom and a vast white space above it. Works fine in IE and
Safari though. The Tabbed Panel still works fine in Firefox, it
just locates it self miles below the top of the page. Anybody have
an idea for me?
Here's a link to the site I am working on:
http://gs.svtv.com/temp/VolunteerAwards.html

Answer 1

Hi pixelfixer,
On your outer table you are specifying a height that is not
enough to accomodate all of the content within it when your longer
tabs are showing. This is tickling some layout bugs within
Mozilla/Firefox. To see what I'm talking about, turn on all the
borders for the tables within your document. You'll notice that the
large whitespace that appears is actually Firefox sizing the empty
row *above* the tabbed panels improperly.
The table with the height specified looks like this:
<table id="Table_02" align="center" border="1"
cellpadding="0" cellspacing="0" height="620" width="784">
If you remove the height specification, things work properly
which means you won't need the workaround CSS rules you picked up
from one of the other forum posts:
.TabbedPanelsContent table {
display: none;
.TabbedPanelsContentVisible table {
display: table;
FYI, the setting of the display to table does not work in IE
anyways, only block works ... and it turns out that the previous
forum post could've been fixed by simply removing his height
attribute too.
Also, I noticed that you have JS syntax errors being
generated because you have JS code at the top of your document that
looks like this:
VB_Home_over = newImage("../images/VB_Home-over.jpg");
It should be "new Image" ... 2 words:
VB_Home_over = new Image("../images/VB_Home-over.jpg");
You should do a global replace of "newImage" with "new Image"
in your original template document.
--== Kin ==--