2

I'm having a problem with the opacity of a div when my site is viewed on Internet Explorer. Using Raphael 2.0 (un-minified) I create a rectangle using the following code:

var rIn = Raphael("myDiv", "100%", "100%");
rIn.rect(0, 0, "100%", "100%").attr({fill:"black", stroke:"none", opacity:0.6});

In my CSS files if I have transparent divs using the opacity tag, I also write it include filter which seems to work fine for IE.

opacity:0.6; filter: alpha(opacity = 60);

However, Raphael does not appear to allow filter as a property, so this rectangle does not show up at all. This is only a problem on IE - it works on FF/Chrome/Safarai on Win/Mac without a problem.

djq
  • 14,810
  • 45
  • 122
  • 157

1 Answers1

2

filter only works for IE5-7. To support IE8, you need this property as well before your filter property:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

This QuirksMode article should help you as well.

Actually, try a class:

.opacity60 {
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
}

And set your rectangle's class to opacity60 via a setAttribute('class', 'opacity60') call.

Blender
  • 289,723
  • 53
  • 439
  • 496
  • Thanks @Blender. Can I also use a similar property for the Raphael attribute? – djq Mar 31 '12 at 20:42
  • Add a class to the Raphael object. – Blender Mar 31 '12 at 20:54
  • I declared a class in my `.css` and tried setting the attributes using the following `rIn.rect.setAttribute('class', 'opacity60')` but I got the following error message in IE: `SCRIPT438: Object doesn't support property or method 'setAttribute'` – djq Mar 31 '12 at 23:38
  • 1
    refer to the `rect`'s underlying element, like so: `rIn.rect.node.setAttribute('class', 'opacity60')`. – Eliran Malka Apr 03 '12 at 09:29
  • I tried that suggestion @EliranMalka but I got the following error message `SCRIPT5007: Unable to get value of the property 'setAttribute': object is null or undefined`. I did declare a class in my CSS. – djq Apr 05 '12 at 04:54
  • well that seems like a logical problem, which narrows down the problem scope. now you can use defensive coding by `undefined` / `null` checks, and that should do it. – Eliran Malka Apr 05 '12 at 07:46
  • ok it seems like a known issue that [someone had already addressed](http://stackoverflow.com/questions/10031354/raphael-div-opacity-not-working-on-ie). – Eliran Malka Apr 07 '12 at 18:58