I am having an Issue with my page and the Tabbed Content Script

[fakshon]

1) Script Title: Tab Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem: Ok here it goes. I have added a tab content box about half way down my page and it causes my page to scroll further down then it should I have set my page height to 1200 yet it goes down to more like 2000px now. Is there anyway to correct this or am I not doing something right here is a copy of what I have on my page.

<div id="Layer"6 style="position:absolute; width:427px; height:936px; z-index:102; left: 159px; top: 649px;">
<ul id="maintab2" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent5">New Groups</a></li>
<li><a href="#" rel="tcontent6">Radio Stations</a></li>
<li><a href="#" rel="tcontent7">Who's Who?</a></li>
<li><a href="#" rel="tcontent8">Tejano Style</a></li>
</ul>

<div class="tabcontentstyle">

<div id="tcontent5" class="tabcontent">
<table width="396" height="214" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="165" height="149">&nbsp;</td>
<td width="225">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="21">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>

<div id="tcontent6" class="tabcontent">
<table width="396" height="214" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="165" height="149">&nbsp;</td>
<td width="225">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>

<div id="tcontent7" class="tabcontent">
<table width="396" height="214" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="165" height="149">&nbsp;</td>
<td width="225">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>

<div id="tcontent8" class="tabcontent">
<table width="396" height="214" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="165" height="149">&nbsp;</td>
<td width="225">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</div>

</div>

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab", "maintab2")
</script></div>
</DIV>

[ddadmin]

Does this problem only occur in Firefox? If I remember correctly from another script, the issue is with mixing TABLEs with the DIV tag, which unfortunately Firefox frowns upon.

[fakshon]

Actually it's even happening on Internet Expolorer. I set my page height and since I added the tabbed content the page scrolls about a half page more down instead of stopping.

[jscheuer1]

Well, you can't really set a page height and expect it to be respected by browsers if you later add content to the page. In fact, even with static content, if you set a page width and height and your content takes up more room than that, something's gotta give. In part, that is where the overflow property comes in. The default is usually auto, so you get scroll bars in one or both dimensions.