By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,880 Members | 1,817 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,880 IT Pros & Developers. It's quick & easy.

Mozilla vertical sizing of dynamic content bug?

P: n/a
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


Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
In <bp**********@bob.news.rcn.net> "Brian Vallelunga" <bg**********@starpower.net> writes:
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;".
Wretched. This makes your site accessible only to a select set of
browsers.

Can someone suggest a solution?


Have different pages for each tab.

--Dan
--
FREE scripts that make web and database programming easier
http://www.analysisandsolutions.com/software/
T H E A N A L Y S I S A N D S O L U T I O N S C O M P A N Y
4015 7th Ave #4AJ, Brooklyn NY v: 718-854-0335 f: 718-854-0409
Jul 20 '05 #2

P: n/a
This isn't wretched, nor is it that limiting. This isn't being used as the
main navigation for a site, but rather as a sidebar within one page. The
content of each tab would be only a paragraph or a small list of links.

And as for browser support... This will work on most everything post
Netscape 4.x. My problem lies with Mozilla's vertical sizing when changing
tabs. This is the answer I need some help with.

Brian
"Analysis&Solutions" <in**@analysisandsolutions.com> wrote in message
news:bp**********@reader2.panix.com...
In <bp**********@bob.news.rcn.net> "Brian Vallelunga" <bg**********@starpower.net> writes:
I'm attempting to create a tabbed box with CSS and Javascript and am havingsome problems. I have three tabs and three tab content areas. When the pageis loaded, two of the three content areas are set to "display:none;". When auser clicks a tab, I call a function that changes the display style of theappropriate tab page to "display:block;".


Wretched. This makes your site accessible only to a select set of
browsers.

Can someone suggest a solution?


Have different pages for each tab.

--Dan
--
FREE scripts that make web and database programming easier
http://www.analysisandsolutions.com/software/
T H E A N A L Y S I S A N D S O L U T I O N S C O M P A N Y
4015 7th Ave #4AJ, Brooklyn NY v: 718-854-0335 f: 718-854-0409

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.