IE8 Opacity Not Working

Question

Possible Duplicate:
Opacity CSS not working in IE8

So I've been trying to get the opacity working in IE8 (not really IE8 more like the IE8 browser mode in IE9) and for some reason the opacity isn't getting applied. Here's what I have for the CSS.

    nav a:hover {
    color: #fff;
    background: none;
}

nav a:hover:after {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    background: #fff;
    content: '';
    /* IE8 Sucks Balls */
    opacity: 0.10;
    filter: alpha(opacity=10);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
    display: block;
    zoom: 1;
}

IE8 and below at least do indeed suck balls. Have you tried just using the alpha filter without the other two after it? — Bojangles, Mar 09 '12 at 00:41
@cale_b: That's a different issue. His style has layout. Notice `zoom: 1;` — Strelok, Mar 09 '12 at 00:59

score 0 · Answer 1 · answered Mar 09 '12 at 00:59

It might just be because your are in compatibility view. But I doubt it.

Anyways I think it might be because you have your background set to white and the fact that you are using such as low opacity. I would set my background to #000 and opacity to .8 just to make sure that isn't the problem. Also like Joesph said. I don't know what this is doing, nav a:hover:after

Also this tool is good for checking older browsers. (to an extent).

http://www.my-debugbar.com/wiki/IETester/HomePage

If it was me though, I would just use a transparent png for my background. I would go into photoshop make a 1x1 black square, set the opacity to 10% and then save it as a png.

#myelement {
background-image:url('mytransparentbg.png');
}

This would be a last resort for me if I can't fix it because I tend to avoid images as much as possible. — Andrew Lee, Mar 09 '12 at 02:02

Strelok · Answer 2 · 2012-03-09T01:22:19.873

0

My bet is on the fact that it's not working because you're using the HTML5 nav tag that IE9 in IE8 mode does not support. Although it supports it in normal IE9 mode.

Edit. This article and the particular section linked is a MUST read, when using HTML5 elements in browsers that don't support them.

edited Mar 09 '12 at 01:22

answered Mar 09 '12 at 01:11

Strelok

50,229
9
102
115

I'm using html5shiv so that shouldn't be the problem. – Andrew Lee Mar 09 '12 at 02:01

IE8 Opacity Not Working

2 Answers2