titaniumdecoy

Hi,

I'm looking for a way to make the background only of a <div> semi-transparent. I have searched around but have been unable to find a solution that works consistently across browsers. Does anyone know of a way to achieve this in most, if not all, modern browsers?

Thanks.

Arevos

IE7.js is a javascript library that automatically works around many of the bugs in IE5 and 6. IIRC, it gives IE support for transparent png backgrounds.

DaWei

If you're talking about opacity, as seen in the menu shadow here, IE 6 uses a different style specification than Firefox.

Firefox: opacity: .5;
IE: filter: alpha(opacity=50);

I have no idea what IE7 does. I've installed it, but not checked my sites against it.

__________________
Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code.
Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

titaniumdecoy

DaWei: I applied that style to a <div> and it worked, but the text inside was semi-transparent as well. And surrounding the text in a second <div> with higher opacity made no difference.

The solution I have come up with is to use a png file with 1px transparent "holes". So far I haven't had time to look at IE7.js.

DaWei

Put your text in another div at a different level.

__________________
Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code.
Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

titaniumdecoy

I tried adjusting the z-index attribute for both <div>s but that didn't seem to make any difference.