[Wilfred1]

I am trying to create a v4 psuedo tab navigation system that could be used in v3.8. It uses the Tab Menu system at Dynamic Drive: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm but my knowledge on css is very limited so I am having some problems which I hope someone can help with.

There are two problems:
1. How to get the active tab top to be a little higher then the other tabs like in vb v4.
2. How to spread the tabs evenly across the page as in a % of width.

I am using vb v3.8.4

This is what I have in my header template:

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

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

This is what I have created so far in my navbar template:

<script type="text/javascript">
    <if condition="in_array(THIS_SCRIPT, array('adv_index', 'sendmessage','support','staff'))">ddtabmenu.definemenu("ddtabs1", 0)</if>
    <if condition="THIS_SCRIPT == 'blog'">ddtabmenu.definemenu("ddtabs1", 1)</if>
    <if condition="THIS_SCRIPT == 'index'">ddtabmenu.definemenu("ddtabs1", 2)</if>
</script>

<div id="ddtabs1" class="tabmenu">
    <ul>
        <li><a href="../index.php" rel="sb1">Home</a></li>
        <li><a href="../forum/blogs/recent-entries/" rel="sb2">Blogs</a></li>
        <li><a href="../forum/" rel="sb3">Forums</a></li>
    </ul>
</div>

<DIV class="submenu ieclass">
    <div id="sb1" class="subcontent">
        <a href="../index.php?pageid=about">About This Site</a>&nbsp;|&nbsp;
        <a href="../forum/sendmessage.php">Contact Us</a>&nbsp;|&nbsp;
        <a href="../forum/support.php">Help Desk</a>&nbsp;|&nbsp;
        <a href="../forum/staff.php">Volunteer Staff</a>
    </div>

    <div id="sb2" class="subcontent">
        <a href="http">Recent Entries</a>&nbsp;|&nbsp;
        <a href="http">Most Popular</a>&nbsp;|&nbsp;
        <a href="http">Member Blogs</a>&nbsp;|&nbsp;
        <a href="http">My Blog</a>&nbsp;|&nbsp;
        <a href="http">Blog Settings</a>
    </div>

    <div id="sb3" class="subcontent">
        <a href="http">Contacts & Friends</a>&nbsp;|&nbsp;
        <a href="http">Members List</a>&nbsp;|&nbsp;
        <a href="http">Open Contacts Popup</a>&nbsp;|&nbsp;
        <a href="http">Pictures & Albums</a>&nbsp;|&nbsp;
        <a href="http">Social Groups</a>&nbsp;|&nbsp;
        <a href="http">Who's Online</a>
    </div>
</DIV>

This is the style sheet:

.tabmenu ul{
    margin: 0;
    padding: 0;
    float: left;
    font: bold 13px Arial, Calibri, Verdana, Geneva, sans-serif;
    width: 100%;
    border: 1px solid #625e00;
    border-width: 1px 0;
    background: #006699 url(images/tab_bg.png) center center repeat-x;
}

.tabmenu li{
    display: inline;
}

.tabmenu li a{
    float: left;
    color: white;
    padding: 9px 11px;
    font: bold 13px Arial, Calibri, Verdana, Geneva, sans-serif;
    text-decoration: none;
    text-align: center;
    border-right: 1px solid white;
}

.tabmenu li a:visited{
    color: white;
}

.tabmenu li a:hover, .tabmenu li a.current{
    color: #000000;
    font: bold 13px Arial, Calibri, Verdana, Geneva, sans-serif;
    background:url(images/tab_active.png);
        _background-image:none;
    padding: 9px 11px;
    position:relative;
    z-index:10;
}

/*sub menus*/
.submenu{
    clear: left;
    height:25px;
    border: 1px solid #C0C0C0;
    padding-left: 10px;
    padding-top: 6px;
    background: #e9e9e9 url(images/tab_bg_sub.png) center center repeat-x;
}

.submenu a{
    color: #000000;
    text-decoration: none;
    font: bold 12px Arial, Calibri, Verdana, Geneva, sans-serif;
}

.submenu a:hover, a.current{
    color: #930000;
    text-decoration: underline;
}

*:first-child+html .ieclass{ /*IE7 hack to remove gap between menu and sub contents*/
    margin-top: -1em;
}

* html .ieclass{ /*IE6 and below hack to remove gap between menu and sub contents*/
    margin-top: -1em;
}

.subcontent{
    display:none;
}

I have also attached the style sheet as a file plus the js file and images.

I am getting desperate to fix these two problems so any help you could give would be greatly appreciated and thanks from a css newbie