tab content script help

**rmyoung** · 08-31-2007, 07:04 AM

1) Script Title: tab content script

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

3) Describe problem: I am using this scrpit to create a 2 layered tab menu. It works fine in firefox 2.0 but only partially works with IE 7.

The script is the standard tab content script.

When displayed in IE 7 the hyperlinks on the vet submenu ie. George, Matt, Kevin do not work.

The site URL is http://www.crownvet.com.au/meetthestaff1.html

Any help would be greatly appreciated.

**ddadmin** · 08-31-2007, 08:04 PM

I played around with your page for a while, but couldn't find the problem immediately. I do remember a few others having similar issues- you may want to do a search on "Tab Content" and "nesting". I remember our helpful John posting some code relating to this.

In the meantime, nesting in general should work, as shown in the below example:

Code:

<link rel="stylesheet" type="text/css" href="tabcontent.css" />

<script type="text/javascript" src="tabcontent.js">

/***********************************************
* Tab Content script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<body>

<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>
</ul>

<div class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
<p><b><a href="javascript: expandtab('maintab', 3)">Click here to select 4th tab</a></b></p>
</div>

<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />


<ul id="subtab" class="shadetabs">
<li class="selected"><a href="#" rel="tsubcontent1">Tab 1</a></li>
<li><a href="#" rel="tsubcontent2">Tab 2</a></li>
<li><a href="#" rel="tsubcontent3">Tab 3</a></li>
</ul>

<div id="tsubcontent1" class="tabcontent">
Tab content 1.1 here<br />
</div>

<div id="tsubcontent2" class="tabcontent">
Tab content 1.2 here<br />
</div>

<div id="tsubcontent3" class="tabcontent">
Tab content 1.3 here<br />
</div>

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


</div>

<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />

<ul id="subtab2" class="shadetabs">
<li class="selected"><a href="#" rel="tsubcontent21">Tab 1</a></li>
<li><a href="#" rel="tsubcontent22">Tab 2</a></li>
<li><a href="#" rel="tsubcontent23">Tab 3</a></li>
</ul>

<div id="tsubcontent21" class="tabcontent">
Tab content 2.1 here<br /></p>
</div>

<div id="tsubcontent22" class="tabcontent">
Tab content 2.2 here<br />
</div>

<div id="tsubcontent23" class="tabcontent">
Tab content 2.3 here<br />
</div>

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


</div>

<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

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

If you still need help after searching and looking at the above demo, just post back.

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice:

**rmyoung** · 09-01-2007, 02:16 AM

Thanks for you help. I searched and found a thread which had a fix for this issue. The problem in is in the style sheet code.

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

Needs to have
position:relative;
z-index:1;

added to it.

ps. thanks for the reminder about the credit. I had forgotten to add that back in.

Thread: tab content script help

Thread Tools

Search Thread

tab content script help

Bookmarks

Bookmarks

Posting Permissions