Opacity CSS not working in IE8

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?

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

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

No idea if this still applies to 8, but historically IE doesn't apply several styles to elements that don't "have layout."

see: http://www.satzansatz.de/cssd/onhavinglayout.html

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

but this opacity code not work in ie8

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

Apparently alpha transparency only works on block level elements in IE 8. Set display: block.

Using display: inline-block; works on IE8 to resolve this problem.

FWIW, opacity: 0.75 works on all standards-compliant browsers.

CSS

I used to use the following from CSS-Tricks:

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

Compass

However, a better solution is to use the Opacity Compass mixin, all you need to do is to @include opacity(0.1); and it will take care of any cross-browser issues for you. You can find an example here.

here is the answer for IE 8

AND IT WORKS for alpha to work in IE8 you have to use position atribute for that element like

position:relative or other.

http://www.codingforums.com/showthread.php?p=923730

None of the answers above worked for me, so I just gave my DIV tag a transparent background image instead, that worked perfectly for all browsers.

This code works

filter: alpha(opacity = 50); zoom:1;

You need to add zoom property for it to work :)

You can also add a polyfil to enable native opacity usage in IE6-8.

https://github.com/bladeSk/internet-explorer-opacity-polyfill

This is a stand alone polyfil that does not require jQuery or other libraries. There are several small caveats it does not operate on in-line styles and for any style sheets that need opacity polyfil'd they must adhere to the same-origin security policy.

Usage is dead simple

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>