CSS opacity woes

I've been reading ALL over and can't find a group who agree:

I'm trying to make some <TD> backgrounds semi-transparent. I've created
semi-transparent images and put them in. It works only if they are completely
transparent. What a mess.

I've also tried all the lovely "background : filter:alpha(opacity=75) ;
-moz-opacity: 0.75;opacity: 0.75;-khtml-opacity: 0.75; " stuff. It works for
all but IE, imagine that. Except that it makes EVERYTHING - text and all -
transparent.

Here is what I'm working with:

.modules {
background : url("../images/transbluebg.gif");
background : filter:alpha(opacity=75) ; -moz-opacity: 0.75;opacity:
0.75;-khtml-opacity: 0.75;
border : 1px solid #C0C0C0;
}

So, how can I make these semitransparent backgrounds what will work in all
browsers? If I can't, how do I make IE just plain ignore the transparency part
and use the color?

Thanks
Dan J.

Just using
td {
opacity: .75;
filter: alpha(opacity=75);
}
should be fine. Haven't noticed anything unusual about it.

Or, it's a little messier I guess, but try using a span. I haven't actually
done this, but it seems reasonable.

td {
background-image:url(stuff);
opacity: .75;
filter: alpha(opacity=75);
}

..opaque {
opacity: 1;
filter: alpha(opacity=100);
}

<td><span class="opaque">Your text</span></td>

..oO(Dan Joyce)

I've been reading ALL over and can't find a group who agree:

I'm trying to make some <TD> backgrounds semi-transparent. I've created
semi-transparent images and put them in. It works only if they are completely
transparent. What a mess.

GIF doesn't support alpha-transparency. Use a PNG instead, which will
work well in all recent browsers.

I've also tried all the lovely "background : filter:alpha(opacity=75) ;
-moz-opacity: 0.75;opacity: 0.75;-khtml-opacity: 0.75; " stuff. It works for
all but IE, imagine that. Except that it makes EVERYTHING - text and all -
transparent.

Yep. Remove it. It's not what you want in this case.

So, how can I make these semitransparent backgrounds what will work in all
browsers?

Your only problem is IE. For this you could load the background PNG with
its AlphaImageLoader(). Put it in an extra stylesheet and link to it
within a conditional comment, so only IE will get it. See the example on

http://mfesser.de/test/transparency/

If I can't, how do I make IE just plain ignore the transparency part
and use the color?

This is possible as well. IE doesn't support advanced selectors like
child selectors for example. This can be used to "hide" certain
selectors and properties from it, but it's still kind of a hack.

Micha

Wow, thanks. Perfect. But, I'm a bit confused with the part about the
seperate style sheet. I think I understand how to go about it, but let me make
sure. Then, I have a problem with it.

1) To go about it, I just put that caviot for IE in the index.php, right?

2) the stylesheet I'm using is large. Do I need to completely copy the entire
sheet and then when I change things do it on both?

Thanks
Dan J.

No, you only need to add the rules that change. That's what the "Cascade"
is in Cascading Style Sheets. Anything not explicitly overriden is
inherited.

"Dan Joyce" <webforumsuser (AT) macromedia (DOT) com> wrote

Wow, thanks. Perfect. But, I'm a bit confused with the part about the
seperate style sheet. I think I understand how to go about it, but let me
make
sure. Then, I have a problem with it.

1) To go about it, I just put that caviot for IE in the index.php, right?

2) the stylesheet I'm using is large. Do I need to completely copy the
entire
sheet and then when I change things do it on both?

Thanks
Dan J.

shouldn't this work?

..modules {
background: filterrogidXImageTransform.Microsoft.AlphaImag eLoader(
src='../images/blue-trans.png'
)

}

shouldn't this work?

.modules {
background: filterrogidXImageTransform.Microsoft.AlphaImag eLoader(
src='../images/blue-trans.png'
)

}

It works if I just put in the
background : url(../images/blue-trans.png)