CSS td background transparency

[SubJunk]

Hey there people, just a little question I can't seem to figure out.
I'm using this tag to make my <td>'s semi-transparent:
filter: alpha(opacity=50); opacity: .50;
The problem is that I want the text inside the tags to have full opacity - I want only the background colour to be semi-transparent - but with this code everything inside the tags becomes semi-transparent.
I have tried applying another transparency code with opacity=100 and opacity:1 to the text, but this doesn't seem to work.
Any help would be greatly appreciated, thanks =)

[mark87]

This question get's asked every week lol, well there's a few tricks to get opacity working how you want.

Firstly you need to use a few different properties for different browsers -

filter: alpha(opacity=50);
-moz-opacity: .50;
-khtml-opacity: 0.50;
opacity: .50;

Filter is for IE, -moz is for Mozilla/Firefox, ktml is for Konqueror, and opacity is for a few other browsers.

Getting the text to be non-transparent is a bit messy. Simply add position:relative to the text and IE suddenly makes it non-transparent again but this doesn't seem to work in Firefox.

You can try this method (http://www.mandarindesign.com/troops.html#opacitybackgroundhard) which should work in nearly all browsers.

[SubJunk]

Sorry for that Mark87, I know it must be trying to answer the same question all the time. I gave the past threads a look but I guess I should've looked harder.
Thanks a lot for your help I'll try it soon =D

[mark87]

Oh I wasn't complaining, just stating. Opacity is one of those things which still seems a bit of a mess to implement, hopefully with IE7 and future browser releases we can just use one property!

Good luck.

[SubJunk]

Hmm could have a problem. It says that in Firefox/Mozilla it needs to know the width of the text to display, but I'm working with a resizeable page. I tried it but with 100% width instead, but that doesn't work.
Is it doomed to not work?
Here's the page I'm working with, very rough draft. http://www.redskiesdesign.com/clients/allcat/draft-0401/

[blain]

We just have to wait until W3C release the CSS3 recommendation and the browsers implement it.

http://www.w3.org/TR/2003/WD-css3-color-20030214/#transparency

[danya]

The best way to do that is creating a 1 * 1 png pixel with alpha channel transparency!

You can set the alpha channel transparency to any percentage you want.

Good luck!

(by the way, an other advantage, it works in every browser!) :thumbsup: