Opacity CSS not working in IE8

Question

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?

Answer 1

No idea if this still applies to 8, but historically: http://www.satzansatz.de/cssd/onhavinglayout.html

Answer 2

Setting these (exactly like I have written) has served me when I needed it:

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);

Answer 3

This related/duplicate question has your answer I think. http://stackoverflow.com/questions/859000/opacity-in-web-pages

Answer 4

Despite IE8's claims of full CSS2.1 support, there are -- many, many bugs -- that make such a claim questionable and I wouldn't be surprised if you've run into another of them.

Answer 5

You need to set Opacity first for standards-compliant browsers, then the various versions of IE. See Example:

.slidedownTrigger
{
    cursor: pointer;
    opacity: .75; /* Standards Compliant Browsers */
    filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

Note that I eliminated -moz as Firefox is a Standards Compliant browser and that line is no longer necessary. Also, -khtml is depreciated, so I eliminated that style as well.

Furthermore, IE's filters will not validate to w3c standards, so if you want your page to validate, separate your standards stylesheet from your IE stylesheet by using an if IE statement like below:

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

If you separate the ie quirks, your site will validate just fine.