http://dynamicdrive.com/dynamicindex1/ddtabmenu.htm
I'm using #4 (modified colors) and for some strange reason, the menu is crushed vertically and horizontally.
This is my code:
Code:
<script type="text/javascript" src="../../scripts/tabmenu.js">
<script type="text/javascript">
ddtabmenu.definemenu("tabs", 2)
</script>
Code:
<style type="text/css">
<!--
@import url('../../styles/site.css');
@import url('../../styles/2ndlevel.css');
@import url('../../styles/style.css');
@import url('../../styles/tabs.css');
@import url('../../styles/colortabs.css');
body { behavior: url(../scripts/csshover2.htc); }
#menuItemServices { background-image:url('../../images/navigation/on_services.gif'); }
-->
</style>
The one for this ddtab menu is this:
@import url('../../styles/colortabs.css');
(body part)
Code:
<div id="tabs" class="colortabs">
<ul>
<li><a href="overview.php" title="Link 1">Overview</a></li>
<li><a href="linux.php" title="Link 2">Packages</a></li>
<li><a href="upgrades.php" title="Link 3">Add Ons</a></li>
<li><a href="management.php" title="Link 5">Management</a></li>
<li><a href="security.php" title="Link 6">Security</a></li>
<li><a href="nas.php" title="Link 7">Backups</a></li>
</ul>
</div>
CSS file
colortabs.css
Code:
.colortabs{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.colortabs ul{
font: normal 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}
.colortabs li{
display:inline;
margin:0 3px 0 0;
padding:0;
text-transform:uppercase;
}
.colortabs a{
float:left;
color: white;
background: #FFB400 url(../images/navigation/color_tabs_left.gif) no-repeat left top;
margin:0 3px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}
.colortabs a span{
float:left;
display:block;
background: transparent url(../images/navigation/color_tabs_right.gif) no-repeat right top;
padding: 6px 12px 5px 7px;
}
.colortabs a span{
float:none;
}
.colortabs a:hover{
background-color: #FF9C01;
}
.colortabs a:hover span{
background-color: #FF9C01;
}
.colortabs a.current, #colortabs a.current span{ /*currently selected tab*/
background-color: #FF9C01;
}
.colortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 12px;
background: #FFB400;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}
.tabcontainer{
clear: left;
width:95%; /*width of 2nd level sub menus*/
height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}
.tabcontent{
display:none;
}
The strange part is, it was working fine before until I was cleaning up *another* css file
If your curious what the other css has...it is below
(tabs.css) which is for the site's MAIN navigation menu (nothing to do with ddtab menu)
Code:
#current_specials {
background-color:#28bbd5;
background-image:url(../images/specials_bgd.gif);
background-repeat:no-repeat;
background-position:top right;
color:#5c939d;
}
.specials_intro {
background-color:#dbf4f8;
padding:5px;
color:#5c939d;
}
ul.specials_items
{
margin:0px;
padding: 1px 0px 0px 0px;
}
ul.specials_items li
{
list-style:none;
margin:0px;
padding:2px;
border-bottom: 1px solid #e5f4f6;
}
.viewbutton {
background-image:url(../images/viewbutton_bgd.gif);
line-height:24px;
color:#FFFFFF;
margin:10px 5px 10px 5px;
}
.viewbutton a:link, .viewbutton a:visited, .viewbutton a:active {
color:#FFFFFF;
text-decoration:none;
}
.viewbutton a:hover {
color:#FFFFFF;
text-decoration:underline;
}
/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}
/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber {
}
.tabberlive {
margin-top:1em;
}
/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding: 3px 0px 0px 0px;
}
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 3px;
background-color: #18a2ba;
text-decoration: none;
color: white;
}
ul.tabbernav li a:link { color: white; }
ul.tabbernav li a:visited { color: yellow; }
ul.tabbernav li a:hover
{
color: #ffffff;
background: #3dd6f1;
}
ul.tabbernav li.tabberactive a
{
background-color: #fff;
border-bottom: 1px solid #fff;
color:#189bb2;
}
ul.tabbernav li.tabberactive a:hover
{
color: #ff722b;
background: white;
border-bottom: 1px solid white;
}
/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:1px 6px 2px 6px;
margin:3px;
background-color:#FFFFFF;
/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */
/* height:200px; */
/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */
/* overflow:auto; */
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
Before you post, read our: 
