[SOLVED] Raised Tab Menu

It could be to do with LoVe HAte (the states need to be in order in your css)
:link, :visited, :hover, :active
Otherwise can you show use what you currently have or point us to a URL?

Here is my css code:

#tabsmenu { float: left; width: 96.93%; font-size: 97%; line-height: normal; border-bottom: 0px solid #A3A8B2; margin: 10px 0px 0 10px; padding: 0px; }

* html #tabsmenu {
margin-bottom: 1em;
}

#tabsmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#tabsmenu li {
display: inline;
margin: 0;
padding: 0;
height: 25px;
}

#tabsmenu a {
float: left;
background: url("images/left-tab.gif") no-repeat left top;
margin: 0;
padding: 0 0 0 10px;
text-decoration: none;
height: 25px;
}

#tabsmenu a span {
float: left;
display: block;
background: url("images/right-tab.gif") no-repeat right top;
padding: 3px 14px 3px 5px;
font-weight: normal;
color: #333;
margin: 0 1px 0 0;
height: 25px;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsmenu a span {
float: none;
}
/* End IE5-Mac hack */

#tabsmenu #current a {
background: url("images/left-tab-hover.gif") left top no-repeat;
}

#tabsmenu #current a span {
background: url("images/right-tab-hover.gif") right top no-repeat;
color: #000;
font-weight: bold;
}

#tabsmenu a:hover {
background: url("images/left-tab-hover.gif") left top no-repeat;
}

#tabsmenu a:hover span {
background: url("images/right-tab-hover.gif") right top no-repeat;
color: #000;
}
#tabborder { height:1em; background:#FFEAB7;
}

can you put show me the HTML for the menu too?

Sure. I removed the height and all my experimenting from the css because it wasn't working anyway...
But here is my HTML markup.

I was doing some search on the web and came across this grid software http://www.activewidgets.com/grid/.

The bottom tab sample is what I would like to establish. Is this possible with css only? Or with a css/javascript combo?

I honestly can't see anything amiss there. If you're hover is working the current ID should too. The only thing that looks questionable is the order of your background image. I've always done url, repeat, left/right, top/bottom. If you still can't get it up and running I'll have a little play with it.

Not sure what you mean when you say url left/right ect. Could you show me? Because I'm using rounded images the right image is extended as to provide enough room for text.

I've uploaded my custom images so you can see for yourself and maybe play with it.
Let me know what you think. Thanks for your help!

Also note - the background color for this tab is #7F9DB9

You had:

background: url() left top no-repeat;

where I've always done:

background: url() no-repeat left top;

Actually, if you want to clean it up, put the following in to make sure:

#tabsmenu a {
background-color: #fff;
background-repeat: no-repeat;
background-position: left top;
background-image: url(images/left-tab.gif);
}
#tabsmenu a span {
background-color: #fff;
background-repeat: no-repeat;
background-position: left top;
background-image: url(images/right-tab.gif);
}

#tabsmenu #current a {
background-image: url(images/left-tab-hover.gif);
}
#tabsmenu #current a span {
background-image: url(images/left-tab-hover.gif);
}

#tabsmenu a:hover {
background-image: url(images/left-tab-hover.gif);
}
#tabsmenu a:hover span {
background-image: url(images/right-tab-hover.gif);
}

Thanks. Not sure about the clean up code I tried using it but it bad on my end. Also, I tried switching the order as you suggested but when I now play with the height of the hover tab (by increasing as to cause a raised effect) it only pushes everything below it down? So the whole raised hover and current tag issue is still my initial problem...

Any other suggestions? I want the hover and active tabs to be slightly raised. Once I figure out how to do that I'll re-create the hover images to fit the space. Make sense?

Thanks for your help.

simple change for height is to use:

a {background: url() no-repeat left 2px;}
and
a:hover {background: url() no-repeat left top;}

It worked! Thanks a bunch! I would have been forever trying to resolve that!

Hi,

Could you please show me the final output. I still cant do it.

Thanks in advance