Webmaster Forum / HTML, CSS, Scripts / CSS / November 2003

Greetings,

I'm attempting to create a tabbed box with CSS and Javascript and am having
some problems. I have three tabs and three tab content areas. When the page
is loaded, two of the three content areas are set to "display:none;". When a
user clicks a tab, I call a function that changes the display style of the
appropriate tab page to "display:block;". This is fine, as the correct block
is displayed.

The problem lies with Mozilla. Many times when switching the displayed div,
the sizing (vertical) is messed up. Instead of showing the div to fit the
current text, it is much longer, as though it would fit the current text and
the previous text that was displaying. This creates a huge whitespace at the
bottom of my div. I do not see this problem with IE 6 nor Opera 7.

The switching code is below:

<script type="text/javascript">
<!--
var oldTab;
var oldTabPage;

function showTabPage(tabPage, tab)
{

 // Hide the old tab page
 if ( oldTabPage == null )
  oldTabPage = document.getElementById('tabpage1');

 oldTabPage.style.display = 'none';

 // Display the new tab page
 var currentTabPage = document.getElementById(tabPage);

 currentTabPage.style.display = 'block';

 oldTabPage = currentTabPage;

 // Get the current tab for styling
 var currentTab = document.getElementById(tab);

 if ( oldTab == null )
  oldTab = document.getElementById('tab1');

 oldTab = currentTab;
}
-->
</script>

There's nothing very special about the code. I have zipped up a small
example that can be downloaded here:
http://brian.vallelunga.com/files/tabbox.zip (4K)

Can someone suggest a solution? Is there someway to have Mozilla recalculate
the height at the end of the function? Any other suggestions? I have already
tried comp.lang.javascript without success, and thus I am now here. I have
not found any other references to this problem on Google either.

Thanks,

Brian