ddtab menu?

[Chadi]

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:


<script type="text/javascript" src="../../scripts/tabmenu.js">
<script type="text/javascript">
ddtabmenu.definemenu("tabs", 2)
</script>



<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)


<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



.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)


#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;
}

[Chadi]

Someone responded and I came to check the thread but there is no response??

[Chadi]

Please help me out

[Chadi]

How do I make it vertically taller (padding)? I cannot trace which padding area it is. I'm not a css pro, so please bear with me.


.ddcolortabs{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.ddcolortabs ul{
font: normal 11px Arial, Verdana, sans-serif;
margin:0;
padding:0;
list-style:none;
}

.ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}


.ddcolortabs a{
float:left;
color: white;
background: #34b773 url(../images/navigation/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.ddcolortabs a span{
float:left;
display:block;
background: transparent url(../images/navigation/color_tabs_right.gif) no-repeat right top;
padding: 6px 8px 3px 7px;
}

.ddcolortabs a span{
float:none;
}

.ddcolortabs a:hover{
background-color: #ee9f19;
}

.ddcolortabs a:hover span{
background-color: #ee9f19;
}

.ddcolortabs a.current, #ddcolortabs a.current span{ /*currently selected tab*/
background-color: #ee9f19;
}

.ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #34b773;
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;
}

Also, the actual tab menu I'm using is this (provided wrong link in OP)
http://dynamicdrive.com/dynamicindex1/ddtabmenu.htm

Example 4

One problem is the line below tabs is NOT showing up odd enough. I did fix the crushed tab portion (had to correct the body code) but the line still does not show up (blank) BUT it does push the rest of the body content below it all the way down, about a page view's worth. If I remove this code, it restores the body content back to where it should be, right below the tabs

<div class="ddcolortabsline">&nbsp;</div>


However, I really do want the line there yet not blank and not pushing the content far down leaving a big white space.