1) Script Title: DD Color Tabs & Tab Content
2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...olor-tabs/P10/
3) Describe problem:
Ok I have merged these two Items and almost have them working pretty good. I have one problem.
Selected Tab is call Current and the CSS is not merging well. Below is my code.
Code:/* start of tabcontent */ .shadetabs{ margin-left: 4px; padding: 0; width: 100%; background: transparent; voice-family: "\"}\""; voice-family: inherit; padding-left: 5px; } .shadetabs ul{ font: bold 12px Verdana; margin:0; padding:0; list-style:none; } .shadetabs li{ display:inline; margin:2px 2px 0 0; padding:0; } .shadetabs a{ float:left; color: black; background: #cccccc url(Images/color_tabs_left.gif) no-repeat left top; margin:0 2px 0 0; padding:0 0 1px 3px; text-decoration:none; letter-spacing: 1px; } .shadetabs a span{ float:left; display:block; background: transparent url(Images/color_tabs_right.gif) no-repeat right top; padding:4px 9px 2px 6px; } .shadetabs a span{ float:none; } .shadetabs a:hover{ background-color: #cbcbea; } .shadetabs a:hover span{ background-color: #cbcbea; } .shadetabs #current a, .shadetabs #current span{ /*currently selected tab*/ background-color: #cbcbea; } .tabcontentstyle{ /*style of tab content oontainer*/ border-top: 1px solid #778; width: 90%; margin-bottom: 1em; /* margin-left: 25px; */ padding: 10px; background: #f5f5f5; } .tabcontent{ display:none; } @media print { .tabcontent { display:block!important; } } <ul id="maintab" class="shadetabs"> <li class="selected" id="current"><a href="#" rel="tcontent1"><span>Tab 1</span></a></li> <li><a href="#" rel="tcontent2"><span>Tab 2</span></a></li> <li><a href="#" rel="tcontent3"><span>Tab 3</span></a></li> <li><a href="#" rel="tcontent4"><span>Tab 4</span></a></li> </ul>



Reply With Quote
Bookmarks