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.

Advertisements

5 thoughts on “Opacity in Internet Explorer

  1. 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;

  2. @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

  3. 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

  4. @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.

Comments are now closed.