Resolved Anchor Background Opacity without applying Opacity to the Text

[dylanbaumannn]

Hello!

I'm currently doing some front-end development for a website I've been working on and I've run into a small issue: I need to apply an opacity to the background of an anchor without applying that opacity to the text inside the anchor.

(it's the buttons in the upper right that say "Services, About, etc"
Below is what the navigation is supposed to look like:
http://go.prevue.it/view/bzbq3

And this is what it currently looks like:
http://methodistphysiciansclinic.com/index.cfm?event=clinic/192-dodge




My HTML:

<ul class="nav" id="subnav">
   <li class="services">
       <a href="#">Services</a> 
   </li>
   <li class="about">
       <a href="#">About</a> 
   </li>
</ul>

(which is actually generated through ColdFusion)

<ul class="nav" id="subnav">
    <cfoutput>#event.printNavList(skipLevels=1)#</cfoutput>
</ul>

My CSS:

	#subnav{
		text-align:right;
		height:33px;
		float:right;
		padding:10px 0;
	}
	ul#subnav.nav li{
		display:block;
		float:left;
		margin:10px 0 0 10px;
	}
	ul#subnav.nav li:last-child{
		margin-right:21px;	
	}
	/* doing it this way causes the text to also become transparent
	ul#subnav.nav li.about a{
		color:#ffffff;	
	} */
	
	ul#subnav.nav li a{
		opacity:.5;
		padding:12px 9px;
		background:#fff;
		border-radius:3px;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;			
	}

any help would be greatly appreciated! Thanks!

[VIPStephan]

Either use a semi-transparent image as background (e. g. a 1×1 px white image with transparency) or use a rgba background color value, like: background-color: rgba(255,255,255,.5);. The latter one isn’t working in older browsers including IE 8, though.

[Sammy12]

rgba does work for ie6 and above for backgrounds

RGBA & HSLA IE Converter

however, it does not work for anything else, for instance border: 1px solid rgba(0, 0, 0, .5);
there is no ie filter for that

[dylanbaumannn]

Thank you very much VIPStephan, I had completely forgotten about the RGBA method (head smack). Works perfect now

Also thanks to you Sammy for the IE converter, I was worried about the backwards compatibility of the site (they have machines in their accounting area still boasting Windows 1998 haha)

I'll mark this as resolved!

[dylanbaumannn]

ermmm the prefix option has seemed to have run away from me... where is the close thread option?

[VIPStephan]

You can change the thread title to “resolved” within a certain amount of time by editing your first post. If that time frame is exceeded you can’t edit it anymore. And that’s why I’m here.