3

In Internet Explorer 8 it seems like the pseudo elements doesn't support opacity:

Example:

# div:after  {
   content: '';
   background: red url('pattern.png') no-repeat left top;
   position: absolute;
   top: 0;
   left: 0;
   height: 300px;
   width: 300px;
   opacity: 0.10;
   filter: alpha(opacity=10);
}

Does anyone have any idea how i can fix this, so i have the pattern with the opacity off 0.10.

Gilles 'SO- stop being evil'
  • 104,111
  • 38
  • 209
  • 254
John Smit
  • 31
  • 1
  • 3
  • 1
    IE8 doesn't support `opacity` at all. It's not a pseudo-element issue only. – BoltClock Apr 12 '12 at 09:29
  • That's true. But with the 'filter' option you can.. Still that's not working too. filter: alpha(opacity=50) is also not working. – John Smit Apr 12 '12 at 09:41
  • now you have a space between the hash and the element selector (`# div`). is this corresponding to the code? – Eliran Malka Apr 12 '12 at 10:29
  • **let's narrow it down:** please check to see the if the Doctype of your document is not rendering your IE8 as IE7 (can be seen in the developer tools, under 'document mode'), as IE7's support for pseudo elements is lacking, whereas IE8 is quite compatible (few minor bugs, should not affect this). – Eliran Malka Apr 12 '12 at 11:31
  • The space is not the problem. When i submitted the question it changed it. The Document Mode: IE8 Standards. Using the IE9 inbuild tool to check websites in IE7 en IE8. – John Smit Apr 12 '12 at 23:52

1 Answers1

1

the filter property only works for IE5-7, to support opacity in IE8, you'll have to use the following:

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

see a complete reference on this code snippet from 'CSS-Tricks' on cross browser opacity.

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100
  • 1
    That's right. Even with the -ms-filter: (etc..) its not working. I tried everything with the filter. I think the problem relies on the fact that its a pseudo element. Is there a way to do this with Javascript? – John Smit Apr 12 '12 at 10:15
  • are you considering the order? case you're adding both `filter` and `-ms-filter`, the later should appear first. – Eliran Malka Apr 12 '12 at 10:24
  • Yes, I'm considering the order. I have tested all the possible methods. It's not a error in the code or something like that. I need a workaround with javascript. – John Smit Apr 12 '12 at 11:10
  • filter:alpha(opacity=10) works fine in IE8. – Litek Jul 12 '12 at 10:28