CODEWITHSUNDEEP
cssinternet-exploreropacity
Igor B.
Igor B.

Reputation: 15

Internet Explorer's problem with css :after pseudo element when using opacity filter

I am drawing a pointed triangle at the bottom of the div using :after pseudo-element. It works as designed. However, when I add the opacity filter for the div, it stops working in IE (I am testing it on IE8). It works just fine in FF, Chrome, and Safari.

Here is HTML:

<html>
    <head></head>
    <body>
        <div id="demo"></div>
    </body>
</html>

Here is CSS:

#demo {
  background-color: #333;
  height: 100px;
  position: relative;
  width: 100px;
}
#demo:after {
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
  border: 10px solid transparent;
  border-top-color: #333;
  top: 100%;
  left: 10px;
}

Run it in IE and see the result that looks like image here: link text

Now add IE opacity filter: to the #demo so it looks like this and run it in IE again:

#demo {
  background-color: #333;
  height: 100px;
  position: relative;
  width: 100px;

  filter: alpha(opacity=50);
}

Notice that opacity filter works but the triangle at the bottom of the div disappeared. The same thing works just fine in every other browser (the only difference is that you need to use "opacity: 0.5" instead of IE specific "filter: alpha(opacity=50);")

Does anybody know why this is happening, and how to get around it?

Thanks.

Upvotes: 1

Views: 3423

Answers (2)

Zoltan Hawryluk
Zoltan Hawryluk

Reputation: 126

The problem is that IE Visual Filters (like the alpha one you are using) were developed before :after and :before were implemented in IE.

You should wrap the #demo div with another div container, and put the opacity on that (making sure the container div has layout).

Alas, it is the only way to do ti

Upvotes: 0

Lex
Lex

Reputation: 1378

An object must have layout for the filter to render. Pseudoelement :after don't have layout. Sorry to say that.

Upvotes: 3

Related Questions