143

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?

Marcus Downing
  • 10,054
  • 10
  • 63
  • 85
  • This related/duplicate question has your answer I think. http://stackoverflow.com/questions/859000/opacity-in-web-pages – Jeff Martin Dec 22 '09 at 18:31
  • I saw that question - trouble is the answer:

       filter: alpha(opacity=50); /* internet explorer */
       opacity: 0.5; /* fx, safari, opera, chrome */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /*IE8*/

    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.     –  Dec 22 '09 at 18:48
  • 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 –  Dec 22 '09 at 18:49
  • 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 Dec 22 '09 at 18:58
  • 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. –  Dec 22 '09 at 19:13
  • I then tried adding a background-color to the h3 and the opacity settings on effect the background in Firefox & Chrome. So it looks like there's a problem with applying the IE opacity setting to my headings. But Firebug tell me the only other thing affecting the style of the h3 is the font-family inherited from the style for the body - so I can't think what's causing the conflict. –  Dec 22 '09 at 19:16
  • have you looked at the IE8 dev tools (F12) and seen if they have anything to say? – Jeff Martin Dec 22 '09 at 19:33
  • If you want to make sure that if a browser supports,specific rule,please go to this website and find out,http://caniuse.com/#search=opacity – Hbirjand Nov 07 '14 at 06:39

10 Answers10

158

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

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);
Gabriel McAdams
  • 56,921
  • 12
  • 61
  • 77
  • 6
    Thanks, I believe "filter: alpha(opacity=70);" is for IE <8. However, it doesn't work (for me) in IE8 (I just checked). -moz-opacity is now pretty much defunct I believe, and opacity is the standards way of doing things - so, naturally, Microsoft didn't use that way of doing things (way too easy). –  Dec 22 '09 at 18:25
  • 15
    Just setting the "opacity" and "filter" as you describe were enough to make it work for me in both FF4 and IE8. -moz-opacity was not necessary. – demoncodemonkey Jun 09 '11 at 08:01
  • 1
    @Gabriel McAdams : filter: alpha(opacity=70); worked (but in IE 8 Only) – Poonam Bhatt Nov 26 '12 at 06:02
  • @Gabriel That worked a treat! I shall be having no more opacity problems in IE 7/8! – mjcoder Feb 06 '13 at 09:37
  • filter: alpha(opacity=70); does work on IE8. What I have found is that if an element is hidden (display:none) and use jQuery to show it, it looses its transparency and becomes 100% opaque. – tmorell Jun 16 '13 at 19:08
  • 1
    More specific information: Actually it is fadeIn the method that removes the transparency. – tmorell Jun 16 '13 at 19:27
  • Adding the filter did it for me. Opacity didn't work, even though the element had layout. – Elbin Jul 02 '13 at 14:24
65

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

Community
  • 1
  • 1
Azeem.Butt
  • 5,855
  • 1
  • 26
  • 22
  • 9
    IE doesn't apply several styles to elements that don't "have layout." – Azeem.Butt Dec 22 '09 at 19:08
  • 4
    Great! Thanks. That was the problem. The elements I was trying to adjust the opacity for (e.g. h3) didn't "have layout". Once I'd given them some, the opacity worked. All I did was add width: 100%; to the h3. Thanks for pointing me in the right direction. However, it seems mad (if not buggy) that Internet Explorer does this. –  Dec 22 '09 at 20:04
  • 51
    IE doesn't apply lots of styles to lots of elements. – danwellman Sep 12 '12 at 13:32
  • 1
    @danwellman and then it does lots of other "fun" stuff too. Yay. – dudewad Sep 12 '14 at 02:27
  • Interesting is, that IE7 does not need the ‟layout”. I am using responsive background image on element with zero height and `padding-bottom: 100%` and in IE8 the opacity did not take effect untill I set the explicit height. IE7 does not need this. – Kout Jan 09 '17 at 10:48
49

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.

Community
  • 1
  • 1
Kevin Florida
  • 6,659
  • 3
  • 23
  • 20
  • 3
    Just setting the "opacity" and "filter" as you describe were enough to make it work for me in both FF4 and IE8. The section labeled "/*Next 2 lines IE8*/" was not necessary. – demoncodemonkey Jun 09 '11 at 07:58
  • 3
    @demoncodemonkey: Correct. It all depends on which version you have installed. If you want maximum compatibility I suggest all of them. – Kevin Florida Jun 25 '11 at 01:01
  • Correct, but: "In order to guarantee that users of both Internet Explorer 7 and 8 experience the filter, you can include both syntaxes listed above. Due to a peculiarity in our parser, you need to include the updated syntax first before the older syntax in order for the filter to work properly in Compatibility View (This is a known bug and will be fixed upon final release of IE8). Here is a CSS stylesheet example:" (source: [link](http://blogs.msdn.com/b/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx)) – zrathen Oct 01 '12 at 09:49
  • @Kevin "If you want maximum compatibility I suggest all of them". Well then, you shouldn't have removed -moz-opacity, right? – Spooky Jan 06 '13 at 16:40
  • Quotes aren't necessary for -ms-filter. – thdoan Oct 18 '13 at 09:53
17

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

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

crmpicco
  • 16,605
  • 26
  • 134
  • 210
17

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

Bonnie V.
  • 203
  • 2
  • 8
6

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.

d4nyll
  • 11,811
  • 6
  • 54
  • 68
2

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.

Darren Riches
  • 149
  • 1
  • 12
2

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

red
  • 29
  • 1
1

This code works

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

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

mejiwara
  • 49
  • 1
  • 11
1

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>
Chris Marisic
  • 32,487
  • 24
  • 164
  • 258