Opacity Problems 2

[TamedTech]

Afternoon Chaps,

Been a while since I've delved into the old CSS stuff and got a little problem on my latest template with opacity/transparancy and things, which I've not worked with before.

Basicly I have a dark colour background to the page, with an opaque white <UL> over the top of it, like this:

.menu ul li:hover ul {
        background-color:#fff;
	filter:alpha(opacity=40);
	opacity: 0.4;
	-moz-opacity:0.4;
	}

Now, I want to have white links on top of this which are NOT transparant, however all my <li> elements inherit the opacity from the containing <ul>. I've tried to overide this like so:

#header-nav-ul li ul li a:link {
	color:#fff;
	background:none;
	filter:alpha(opacity=100);
	opacity:1.0;
	-moz-opacity:1.0;
	}

But that doesnt work, the links still inherit the opacity and are therefore invisible.

Any ideas on how to sort this one out?

Thanks guys,

Rob

 

[BillyRayPreachersSon]

You cannot turn opacity off for any child / descendant element of the one it is enabled for.

You will have to work around this, for example, use a PNG image with an alpha channel (make sure it's 32-bit), and then use the "filter" workaround to get it to display correctly in IE6.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[TamedTech]

Thanks Dan,

Very quick response, shame it cant be done with CSS alone but I guess a PNG will have the desired effect.

Thanks mate,

Rob

 

[kaht]

Just a quick note that doesn't get pointed out very often. Using the alpha image loader trick for IE6 does not work with secure sites (https). Often times this isn't an issue, but it's something I ran into a few months back and try to mention it when given the chance

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

 

[BabyJeffy]

Thanks for the heads-up on that kaht... I wasn't aware of that little gem. Have a star on me

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094