How to make "sliding door" round-corner headings?

a:hover background-color problem...

[reconstructions235]

Hi Everyone,

I am trying to make links which use two partly transparent background-images assigned to two different tags to get rounded corners, but which also allow you to set background colors and text colors using the :link, :hover, and :active pseudo-classes. I need the background colors to always appear behind the transparent images.

The problem I have is that if I assign the right background image to an <a> tag and the left background image to a <div> wrapper, the left image dissapears and is replaced by the background color assigned to the a:hover pseudoclass when you rollover the link. I need to figure out two tags that I can use to assign background images to two different elements so that neither of them will be covered when the a:hover background color is triggered. I have experimented a lot with no success.

The structure of each of my links is:
<div id="vert_bar">
<a href="">Mission</a>
</div>

And my styles are:

div#vert_bar {background: url(v_nav_background_left.png) no-repeat;}
div#vert_bar a {
display: block;
background: url(v_nav_background_right.png) no-repeat 100% 0;}

I want to be able to set a background text and color like this:

div#vert_bar a:hover {
color: #ffee00;
background-color:#B0B0B0;
}

without either of the "sliding door" background images being covered by the a:hover background color.

Any suggestions?

Thanks,

Reconstructions235

[xfinx]

Hi,

I've used this as a menu, but you might use it for a heading or something...

HTML:
That looks really complicated.. try this code instead:
<div id="menu">
<span><span><a href="" title="">menu1</a></span></span>
<span><span><a href="" title="">menu2</a></span></span>
<span class="active"><span><a href="" title="">etc</a></span></span>
</div>

CSS:
#header #menu {
position: absolute;
right: 0px;
top: 95px;
line-height: 30px;
z-index: 300;
/*Ie5 needs a width*/
}
#menu span {
float: left;
display: block;
line-height: 30px;
background: url(../img/m_bgl.gif) no-repeat left top;
padding-left: 10px;
}
#menu span span {
line-height: 30px;
padding: 0;
padding-right: 10px;
background: url(../img/m_bgr.gif) no-repeat right top;
}
#menu span a {
color: #000;
line-height: 30px;
position: relative;
}
#menu span.active a {
color: #fff;
text-decoration: none;
}
#menu span.active {
background: url(../img/ma_bgl.gif) no-repeat left top;
}
#menu span.active span {
background: url(../img/ma_bgr.gif) no-repeat right top;
}