AJAX

How to make CSS opacity setting work in IE7 ?

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2006

Posts: 174

Reputation: tefflox is an unknown quantity at this point

Solved Threads: 1

tefflox

Offline

Junior Poster

How to make CSS opacity setting work in IE7 ?

Nov 30th, 2006

I have implemented a feature that works in firefox and opera, but doesn't work in IE -- it is the css opacity setting. I am overlaying translucent divs over a jpg image. Do I need to use javascript to fix this for IE ?

http://listenlight.net/05 is the page I'm working on.

Thanks. :-)

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: How to make CSS opacity setting work in IE7 ?

Dec 1st, 2006

javascript won't do it i'm afraid, i've never tried an opacity setting in CSS, but if it's not in the official "standard" for CSS (and possibly even if it is) IE probably doesn't implement it.

you could try with medium alpha PNG files? that way, your image files contain the translucency (alpha) information in the pallete (or in each pixel). they could work in modern versions of IE...

if that doesn't work for you (I've never actually tried PNG translucency in browsers), you could always try good old fashioned screendoor transparency? XD
by that method, transparency is just "removing" pixels, the more pixels you remove, the more transparent a picture is ^_-

EDIT: Just a quick follow-up, translucent PNG files DO work (in Opera atleast).. To make a DIV background color transparent, use a small translucent PNG as the (tiled) background image. =)

EDIT (2): And just to follow that up again, translucent PNG's do NOT work in IE (version 6 atleast), maybe they work in IE7, I don't know. It might end up an IE-only screendoor job ^_-

Last edited by MattEvans; Dec 1st, 2006 at 2:00 pm.

Plato forgot the nullahedron..

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: How to make CSS opacity setting work in IE7 ?

Dec 1st, 2006

And here's an EG,

http://www.fusiongroups.net/testbed/test.html

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<div>
VERY OPAQUE<br/>
<div style="position:absolute;width:400px;height:200px;background-image:url('bg1.gif');"><br/>This text is infront of (on) the screen-door
<br/><br/>
This is the tile used as the divs background-image:
<br/>
<img style="width:80px;height:80px;background-color:white;" src="bg1.gif"/>
</div>
This text is behind the screen-door!
</div>
<div>
VERY OPAQUE<br/>
<div style="position:absolute;width:400px;height:200px;background-image:url('bg1.gif');"><br/>This text is infront of (on) the screen-door
<br/><br/>
This is the tile used as the divs background-image:
<br/>
<img style="width:80px;height:80px;background-color:white;" src="bg1.gif"/>
</div>
This text is behind the screen-door!
</div>

It looks ok at high (large) resolutions, at smaller resolutions it's clear that the image is dotted... On my somewhat blurry high-res screen though, you couldn't tell the difference between that and a translucent PNG ^_-

Last edited by MattEvans; Dec 1st, 2006 at 2:18 pm.

Plato forgot the nullahedron..

•

Join Date: Oct 2006

Posts: 232

Reputation: Rhyan is an unknown quantity at this point

Solved Threads: 24

Rhyan

Offline

Posting Whiz in Training

Re: How to make CSS opacity setting work in IE7 ?

Dec 11th, 2006

There is a complete article about opacity here:

http://www.quirksmode.org/css/opacity.html

In general, I have quickly browsed through the text and I think you will need the following
Explorer Windows

Explorer Windows requires:
filter: alpha(opacity=50);
Note that an element must have layout for a filter to work.

For further clarification you should go through the complete article.

•

Join Date: Nov 2008

Posts: 2

Reputation: Alt_F4 is an unknown quantity at this point

Solved Threads: 0

Alt_F4

Offline

Newbie Poster

Re: How to make CSS opacity setting work in IE7 ?

Nov 13th, 2008

I believe that if you set the width and height of the element as well, IE7 will in fact render the opacity correctly

•

Join Date: Apr 2004

Posts: 167

Reputation: Drew is an unknown quantity at this point

Solved Threads: 7

Drew

Offline

Junior Poster

Re: How to make CSS opacity setting work in IE7 ?

Nov 19th, 2008

Most versions of IE do support Opacity but never correctly implemented it so it requires a few work arounds to work fully.

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
.myImage {
filter: Alpha(Opacity=80); //IE
opacity: 0.8;//other browsers that actually use standards
}
.myImage {
filter: Alpha(Opacity=80); //IE
opacity: 0.8;//other browsers that actually use standards
}