Need help with a Tabbed Menu

[shaitiger1]

Hey folks, I'm very new to the forums so I apologize ahead of time. I tried searching but couldn't find anything offhand. Here is the link to the Tabbed Menu code I used from DD.

http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

I've styled the menu to my liking(sans black active tab) but I'm having issues making the selected or active tab bottomless so the tab and content area look like one entity. Currently I have a border around the inactive tabs, active tab, and content area.

I've tried doing a negative bottom margin on the tab with no avail. I've played with bottom borders as well. Any other quick ideas offhand when looking at the link? Any help would be appreciated. Thanks!!

[Snookerman]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[shaitiger1]

That will be an issue because this is for a company intranet home page. Lets just say I'm using the exact same code (except for some small color differences) provided in that link.

[TheJoshMan]

If it's not possible to post a link to your working version, would you mind posting up the exact code you are using?

This way we could make a local copy and test/debug it ourselves.

[shaitiger1]

Here is the link to the menu.

Menu Link (http://www.generationaxis.com/Untitled-1.html)

Again, looking for a way to make the selected or active tab one element with content box(bottomless tab). Thanks

[shaitiger1]

Bueller? :)

[Snookerman]

Add this to your css code:

.tabsmenuclass a:hover, .tabsmenuclass a.selected{
background:url(tab_back.png) repeat-x;
color: red;
border-bottom-color: #ffffff;
}
and remove this:

.tabsmenuclass ul{
overflow: hidden;
width: auto;
margin: 0;
padding: 0;
list-style-type: none;
}

Good luck!

[shaitiger1]

These changes make it work in Firefox but not in IE. Unfortunately, I need it to work in IE7 :). Thanks though.

[Snookerman]

Sorry, forgot to test it in IE, add this as well:

.tabsmenuclass a{
display: block;
padding: 7px 6px;
background:#f9f9f9;
color:#999999;
margin-right: 1px;
text-decoration: none;
font: bold 13px Arial;
border: 2px solid silver;
font-weight:bold;
margin-bottom:-2px;
position:relative;
}

Good luck!