tabcontent - problem with weird red block

**doorock42** · 02-29-2008, 08:06 PM

1) Script Title:
tabcontent

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

3) Describe problem:
http://www.11alive.com/specials/widg...ws_widget.aspx

I'm using tabcontent to put three areas of content in a new widget. For some reason, there's a red bar to the right of the selected tabs. I've been over my code many times and have not been able to figure out why this is occurring. Please help.

Here is the code for the tabs:

HTML Code:

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1"><span class="travtexta">News</span></a></li>
<li><a href="#" rel="tcontent2"><span class="travtexta">Sports</span></a></li>
<li><a href="#" rel="tcontent3"><span class="travtexta">Dude, What?</span></a></li>
</ul>

Here is the CSS that goes along with it:

HTML Code:

.shadetabs{
padding: 2px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 9px arial;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.travtexta {
font-family: arial;
font-size: 10px!important;
font-weight: bold;
}

.shadetabs li{
display: inline;
margin: 0;
}

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

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(/travel/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

I'm sure it's something really simple that I'm completely missing. Please help. Thank you.