This is an ancient problem: older versions of IE do not support the opacity CSS property. Instead, IE8 uses -ms-filter and IE prior 8 uses filter. Also, in IE, one has to be cautious about the positioning of the element the opacity properties apply to: the element has to be positioned for the filter to work properly. Another trick is to use zoom.
Let’s wrap this up in the css snippet below:
#page { opacity: 0.5; } /* IE7 and less */ #page { filter: alpha(opacity=50); position: relative; zoom: 1; } /* IE8 specific */ #page { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); position: relative; zoom: 1; }
It is a pain but it works.
But what I found is that if you try to set these properties dynamically, through jQuery for instance, they are less obedient.
For filter and -ms-filter to be set through jQuery, the element has to be positioned through css and NOT by jQuery.
So one would need something like this:
/* IE less than 9 */ #page { position: relative; zoom: 1; }
if($.support.opacity){ $('#page').css('opacity' , ".5") }else { $('#page').css('filter' , 'alpha(opacity=50)'); $('#page').css('-ms-filter' , 'progid:DXImageTransform.Microsoft.Alpha(opacity=50)'); }
This is empirical knowledge though. I don’t know why is it like this.
I haven’t tested the following but i’m pretty sure that you can avoid the extra css conditional by setting a width to the #page (a fixed width if that’s the case or even 100%) and put the window.onload function like this:
function conditional_opacity() { // your if statement }
window.onload = conditional_opacity;
@Gerasismos Tsiamalos the problem with browser checking (I am concerned mainly about jQuery here) has led to the development of the $.support.afeature Your function would require the use the $.browser functionality which is 1. not secure 2. deprecated after jquery 1.3. Unless there is a trick that I am unaware of
I’m aware about the $.browser but all i’m saying is taking the existing function that you have (using the $.support) and putting it in a window.onload and setting a width to your #page container (in your normal css file) 🙂
Actually i think it’s gonna work without putting it in a window.onload i’m just suggesting for some extra housekeeping 🙂
In other words all i’m saying is saving this world from another conditional style heh
@Gerasimos Tsiamalos You are right. I got carried away by the ‘onload’, because I thought you would actually go all the way through to test browser with plain vanilla javascript. But then I mentioned $.browser which isn’t plain vanilla javascript. Oh well, I must have been dizzy 🙂 Point taken 🙂 I will try it out.
On a side note, feature detection (among other amazing things) using http://www.modernizr.com/ and http://yepnopejs.com/ is second to none.