DD Color Tabs not expanding

[asiewe61]

Hi All -

http://www.dynamicdrive.com/style/cs...dd-color-tabs/

First time post, I am trying to get this script to work more like the Tabifier script. I want to break the content down into sections but keep all the content on one page. I have started to do this, but when the content expands, my page doesnt expand and to fit, it just overflows over the other content. How can I solve this problem? Also, can I switch the tabs to on onclick event rather than just hovering? Thanks

My Demo

[ddadmin]

Most likely you have an explicit CSS height attributed defined on the DIV that shows the sub contents. Remove that.

BTW it seems you're using DD Tab Menu. It might make more sense to use Tab Content script instead: http://www.dynamicdrive.com/dynamici...tabcontent.htm

[asiewe61]

Thanks, It is working properly in FF now.

[asiewe61]

How can I have the same functionality of a tab content script, with keeping the same tab styles? Is there a simple fix for this?

[ddadmin]

If you mean use DD color tabs as the menu interface for the Tabs Content script, that's certainly possible, assuming you're somewhat familar with CSS. The default tabs (blue look) consist of:

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

While the HTML for DD color tabs look like:

<div id="ddcolortabs">
<ul>
<li style="margin-left: 1px"><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Tools</span></a></li>	
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Forums</span></a></li>	
</ul>
</div>

Simply replace the first with the 2nd code, taking into account the use of the "rel" attributes etc in the first.