Opacity CSS not working in IE8

143
votes

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?

10
cssinternet-explorer-8opacity
This related/duplicate question has your answer I think. stackoverflow.com/questions/859000/opacity-in-web-pages - Jeff Martin
I saw that question - trouble is the answer: <br> <br>&nbsp;&nbsp; filter: alpha(opacity=50); /* internet explorer / <br>&nbsp;&nbsp; opacity: 0.5; / fx, safari, opera, chrome */ <br>&nbsp;&nbsp; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /*IE8*/<br> <br>doesn't work for me (I just tried it again to double check). I applied it to an h3 that was black and bold. In Firefox and Chrome the opacity setting turns the heading gray, as you'd expect, but in IE8 it stays black. - user71463
oops - didn't realise you don't get to use HTML in comments - but I think you can see what I'm trying to say - user71463
if you try those styles on just a solid color div do they work? maybe there is some other CSS going on that is conflicting. - Jeff Martin
Nice one. Yes - when I do a simple div, give it a height and width and a background-color of red, with those opacity settings, it works in IE8. It comes out semi-opaque. I'm struggling to see what the problem is though. I'm not modifying the opacity of anything else in the stylesheet, so I can't think what could be conflicting with it for IE only. - user71463

10 Answers

158
votes

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

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

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

49
votes

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.

17
votes

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

17
votes

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

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

6
votes

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.

2
votes

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

2
votes

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.

1
votes

This code works

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

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

1
votes

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>