SOLVED css menu background transparency and link text

[stevegos]

I have a simple css based menu based on the standard "Navigation: Simple - Horizontal" style sheet. I set a background colour on the hover and a transparency. The transparency works fine on the background but is also making the text link transparent as well.

Here's the css:

Code: Select all

div#menu_horiz li a:hover {
        background-color:#1c386a;
        zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
        color:#fff;
}

How can I stop the transparency from being applied to the link text?

All help greatly appreciated.

Steven

[mcDavid]

Ṣimply: you can't. Opacity transforms the complete element and everything inside it.

You probably just want a transparent background. That's something you can do with an rgba() background color. http://www.css3.info/introduction-opacity-rgba/

IE8 and earlyer do not support RGBA, but then, they don't support opacity either. If you want a fallback for IE, you can set a "normal" color first, and then the RGBA color. Normal browsers will use the last color, bus as IE does not understand the RGBA color value, it will use the first color.
For example:

Code: Select all

element {
  background-color: #fff;  /*just used by old IE browsers */
  background-color: rgba(255,255,255,0.5); /*used by every other browser */
}

If even that's not good enough, your only option is to make a semi-transparent .png image, and set it as background-image.

[stevegos]

Many thanks for that. The rgba works just fine.