CSS Cross Browser Transparancy

[Jmcdo]

Hey, Im trying to fit a transparancy code into the html of my page. I tried it using insert shapes in front page and changing the transparency but as i expected, it didnt work on firefox, opera or anything apart from IE. I then resorted to CSS. I used this style function for each cell in the table.

CSS

.transbox {
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}

HTML

<div class="transbox">
table info
</div>

i messed about with this for a while and it seems to work, the only problem is it effects the text in the table also. Is there anyway of altering the code so it doesnt effect the text and the text in the table keeps its original formatting? Im trying not to use background .png images!

JM

[Twey]

Unfortunately not, no. A child cannot have an opacity that exceeds that of its parent element. PNG images are the only way to do that.

You also missed -khtml-opacity.

[jscheuer1]

Twey is right however, depending upon how you want things to look and the colors that you are dealing with, things can sometimes be worked out by making the text either darker or lighter and perhaps bold. Another strategy is to absolutely position the table that uses semi-transparency via opacity and then absolutely position another table on top of it that uses background-color:transparent. Then, put your background images in the first table and your text in the second.

There are advantages and disadvantages to either method but, both avoid having to deal with IE's alpha image loader which is required when using semi-transparent .pngs and can be a pain to master. Still, it is not all that hard to use and does do the job. It helps tremendously if you have IE to check your work in, how it looks.