Opacity CSS not working in IE8

Posted by Alistair Christie on Stack Overflow See other posts from Stack Overflow or by Alistair Christie
Published on 2009-12-22T18:12:18Z Indexed on 2010/06/09 4:32 UTC
Read the original article Hit count: 379

Filed under:
|
|

I'm using CSS to indicate the trigger text for a jQuery slide-down section: i.e. when you hover over the trigger text the cursor changes to a pointer and the opacity of the trigger text is reduced to indicate that the text has a click action.

This works fine in Firefox and Chrome, but in IE8 the opacity doesn't change.

I've tried a variety of CSS settings without any success.

For example

HTML:
<h3 class="slidedownTrigger">This is the trigger text</h3>

CSS:
.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=75)”;
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

What's stopping IE changing the opacity? Note: I've tried this on a variety of different elements, swapping round the order of the CSS statements, and just using the IE ones on their own. I've also tried using
-ms-filter: "alpha(opacity=75)";
but with no success.

I've run out of things to try to get opacity modification working in IE8.

Any ideas?

© Stack Overflow or respective owner

Related posts about css

Related posts about internet-explorer-8