Opacity in IE isn't working.

[BrownWarrior]

Hi,

I'm having trouble getting opacity to work in IE, can you help

I mainly just want to get it to work in IE8 and IE7 but older browsers would be nice if possible.

this is my code, it works in FF..

window.onload = function() {
    var tag = document.getElementById("bod");
    tag.style.opacity = 0;
    tag.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=' + 0 + ')';



}

thanks for your help,

[rnd me]

 .filter= "alpha(opacity=66)";

[BrownWarrior]

thanks rnd me,

It's still not working though. I've tried both these..

tag.style.filter = "alpha(opacity=10)";

and also 

tag.filter = "alpha(opacity=10)";

and neither are working. I tried it at opacity 10 just incase I wasn't seeing it, but it's definately not happening. I'm testing in IE8 I haven't got older browsers installed yet but it does have IE7 compatability mode. I'm pretty sure it's the finished article though and not IE8 beta. It says version 8.0.7600.16385 in 'about internet explorer'. I just mention this because I read that there was a problem with opacity in the beta version, but I think I should be safe.

any other Ideas?

[Vince616]

Hi bud

This is a weird one but I guess you are right about ie8 being a little buggy on the alpha filter

.myclass{
filter : alpha(opacity=50);
               }

Does not work but

.myclass{
background-color: red;
filter : alpha(opacity=50);
               }

Will work

It seems that if you just want to apply a filter with no other styling then the filter will fail, if you add something else to the styling then it seems to work ok

Hope this helps

V

[BrownWarrior]

Vince616, thanks for that input I'll keep that in mind. That's not what's wrong with mine unfortunately.

rnd me, sorry, your code was fine! it seems there is a bug in my site somewhere or in IE.

I've figured it out partially...

I tried changing the element that was being targeted in my javascript and it works fine on the other elements in my site. In the code I'm trying to fix I'm targeting the body element that I've given an ID of 'bod'. It works fine in FF but not in IE. I've created a very simple stripped down version with nothing in the body element to check if it was IE not letting me apply opacity to the body element. It works fine in this version, so my hunch was wrong and I'm presuming there is a bug within the content in my body element somewhere.

This is the stripped down verrsion that works..

http://www.test.duncangravill.com/opacity.htm


This is my site i'm working on which doesn't work (please ignore the half finished graphics)
http://www.test.duncangravill.com

So what do I do now?

Is there somewhere I can look up IE opacity bugs and try to find one that breaks opacity when there is content it doesn't like in the element opacity is applied to?

or do I have to start rebuilding my site piece by piece and keep testing until i come accross the offending code?

or are there any other options?

thanks,

[justinbarneskin]

"...piece by piece..."

LOL, you have done good to think with a bare-bones html
IE filters like to have height and width declared inline on their tag. Most times, a class reference will fail.

From your first post try this-
(if ie)
tag.filters.item(0).opacity=myVar;

[BrownWarrior]

Originally Posted by justinbarneskin

"...piece by piece..."

LOL, you have done good to think with a bare-bones html
IE filters like to have height and width declared inline on their tag. Most times, a class reference will fail.

From your first post try this-
(if ie)
tag.filters.item(0).opacity=myVar;

Thanks for your suggestion. I tried declaring height and width both to 100% inline but still didn't help. Also I have shown in barebones version that it works with just height width and background declared in css. But the same css isn't working in my site so I think there might be something breaking it.

thanks for the suggestion for the opacity code. I already have the code that works now, tag.style.filter = "alpha(opacity=30)"; it's just not working on the element I want it to work on..

[rnd me]

filtered elements must have layout. {zoom:1} is the least-obtrusive way of giving layout i know about.

[BrownWarrior]

I have found the solution!

I was applying the filter to the body element. In FF all other elements were inheriting the opacity. In IE only inline elements inherit the opacity!! I didn't realise because my body's background was the same as the html background, when I changed it to red I suddenly saw opacity was actually working on the body element which I was targetting! so then I realised it wasn't being inherited and that it is relative and absolute elements that don't inherit so adding...

filter:inherit;

sorts the IE problem out fine!

here is a new version of it working in the barebones html in IE

http://www.test.duncangravill.com/opacity2.htm

However it isn't displaying right in FF. All the colours are wrong!! It looks fine in IE now but not FF?? any ideas about that??

thanks,