Pixel2Life Forum > Making Opacity CSS work in most browsers

Full Version: Making Opacity CSS work in most browsers

Pixel2Life Forum > Help Section > HTML, XHTML, CSS and General Web Design

John Miller

Jul 22 2009, 11:33 AM

Hey, i was wondering if there is a opacity CSS code i could use that works in IE as well as Fire Fox? I'm trying to make semi-transparent tables

I used opacity: 0.6; and it worked in FF but not in IE 6.

When i added in

filter: alpha(opacity=60); & opacity: 0.6; to the css sheet it worked in both, is this alright?

I'd like to get something that works in all browsers if i could in case someone isn't updated to the latest.

Thank you!

Jurnky

Jul 23 2009, 09:32 AM

You can do something like this (Just the way you did):

CODE

.shade {
filter: alpha(opacity=70);
}

As for IE6, opacitys do not work. So go around it, you can use a .PNG transparent image to display an opacity background:

CODE

.shade {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='shade.png', sizingMethod='scale');
}

I wouldn't worry about IE6. IE6 users are decreasing everyday. And eventually, designers dream will come true - No more IE6.

Hope that helps!

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.