Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 82845

Nov 30th, 2006

How to make CSS opacity setting work in IE7 ?

Expand Post »

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. :-)

Similar Threads

how to make a CSS file in HTML and CSS
My PHP Site does not work with IE7 in HTML and CSS
CSS code for borders does not work in HTML and CSS

tefflox

Reputation Points: 12

Solved Threads: 1

Junior Poster

Offline

174 posts
since Jul 2006

Permalink

Dec 1st, 2006

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

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.

MattEvans

Moderator

Featured Poster

Reputation Points: 522

Solved Threads: 64

Veteran Poster

Offline

1,091 posts
since Jul 2006

Permalink

Dec 1st, 2006

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

And here's an EG,

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

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.

MattEvans

Moderator

Featured Poster

Reputation Points: 522

Solved Threads: 64

Veteran Poster

Offline

1,091 posts
since Jul 2006

Permalink

Dec 11th, 2006

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

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.

Rhyan

Reputation Points: 21

Solved Threads: 26

Posting Whiz in Training

Offline

240 posts
since Oct 2006

Permalink

Nov 13th, 2008

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

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

Alt_F4

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Nov 2008

Permalink

Nov 19th, 2008

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

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

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
}

Last edited by Drew; Nov 19th, 2008 at 7:42 pm. Reason: added non-ie css

Drew

Reputation Points: 25

Solved Threads: 7

Junior Poster