Opacity CSS Not Working in Ie8

Opacity CSS not working in IE8

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

css opacity not working in IE

opacity does not work on pseudo objects in IE 10,9,8

Try this code:

HTML:

<div></div>

CSS:

div{
  width:100px;
  height: 100px;
  background: blue;

  filter:alpha(opacity=30);
  -moz-opacity:0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
}

div:after{
    content: ' ';
    position: absolute;
    width:100px;
    height: 100px;
    left: 200px;
    background: blue;

    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

Click to see it in action

What you're supposed to see is two squares both semi transparant. However IE disregards the opacity properties for the pseudo item, and it renders it completely opaqe.

opacity in IE8 not working

Found solution here. Opacity was not the problem I did some debugging and found it was working fine for ie8 the issue was with jquery fadeIn and fadeOut. jQuery fadeIn was making translucent background to turn solid.

Thanks to all who helped.

Opacity is not working on images in IE8

Yes, change these two lines:

.slide-out a:hover{color:#F36F21;}

.hover-products{position: relative; width:338px; margin:20px 0 50px 15px; height: 90px;}

to this:

.slide-out a:hover{color:#F36F21; position: relative;}

.hover-products{width:338px; margin:20px 0 50px 15px; height: 90px;}

Opacity not working on img in IE8

MS filters only work in IE7 if the hasLayout property is set to true, they only work in IE8 on block elements, or if you set the display property to block or inline-block.. as you're trying to use this on an inline element, the a, then setting display: inline-block; should solve it for all IE's as it works to set hasLayout for IE7 and also keeps IE8 happy

.shareActionLink {
    display: inline-block; /* IE needs but shouldn't hurt anyone else */
}
.shareActionLink:link, .shareActionLink:visited {   
    margin-right:8px;
    background: #fff;
    color:#999;
    opacity:0.6;
    filter: alpha(opacity=60);  /* IE */

}

.shareActionLink:hover {
    color:#333;
    text-decoration:none;
    opacity:1.0;
    filter: alpha(opacity=100);  /* IE */
}

CSS background opacity with rgba not working in IE 8

Create a png which is larger than 1x1 pixel (thanks thirtydot), and which matches the transparency of your background.

EDIT : to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.

Filter Opacity not Working for Checkbox (IE8)

Make sure you include all the relevant opacity properties:

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

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

/* Netscape Based Browsers (Mozilla */
-moz-opacity: 0.2;

/* For early Safari's (1.x) */
-khtml-opacity: 0.2;

/* Official CSS property */
opacity: 0.2;

I don't know which browser's you support but that should provide you support for most of the versions of the mainstream browsers in use today.

Also, I ran into this problem myself in some code. Make sure the checkbox in question does not have a z-index above the parent that has the opacity. I found that, contrary to the official specification, Chrome and Firefox will make all elements within a parent opaque if the parent is opaque. IE actually implements it correctly, where it not only takes into consideration the parent the element is in but also the z-index of the element in releation to the parent.

Example 1:

<!-- Markup -->
<div id="parent" class="transparent">
    <div id="child"></div>
</div>

/* CSS */
.transparent {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;
}

In this case both the parent and child elements will have the opacity properties applied to them.

Example 2:

<!-- Markup -->
<div id="parent" class="transparent">
    <div id="child"></div>
</div>

/* CSS */
#parent {
    position: relative;
    z-index: 0;
}

#child {
    position: relative;
    z-index: 1;
}

.transparent {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;
}

In this example, the child element has a z-index larger than the parent. In essence, if you were able to rotate the markup 90 degrees around the x-axis, you would see two separate layer on the z-axis. In the above example, I've found that Chrome and Firefox render both elements opaque even though the elements reside on two different layers. In IE they do not (per the official specification). Here is the official specification on the opacity property. Below is the relevant snippet:

Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts. The rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model ([SVG11], Chapter 3).

I know this may be a little more than you were looking for, but I saw you had positioning within your CSS and I've been bitten by this problem before so I thought I would share.

Best of luck and happy coding!

---

Related Topics