CODEWITHSUNDEEP
cssinternet-explorer-8filteropacityalpha
mingos
mingos

Reputation: 24502

IE8, transparent PNG and filter:alpha

I'll cut right to the point. Here's the output:

enter image description here

(now some optional code - read only if you really want to ;))

Here's the markup:

<a href="/" id="logo_wrapper">
    <span class="logo logo_normal"></span>
    <span class="logo logo_hover"></span>
</a>

Here's the CSS (shortened only to the relevant stuff, for your reading pleasure):

#logo_wrapper {
  position:relative;
}
#logo_wrapper .logo {
  display:block;
  width:260px;
  height:80px;
  background-image:url(logo.png);
  position:absolute;
}
#logo_wrapper .logo_normal {
  background-position:0 0;
}
#logo_wrapper .logo_normal:hover {
  opacity:0;
  filter:alpha(opacity=0);
}
#logo_wrapper .logo_hover {
  background-position:0 -80px;
  opacity:0;
  filter:alpha(opacity=0);
}
#logo_wrapper .logo_hover:hover {
  opacity:1;
  filter:alpha(opacity=100); /* THIS IS THE OFFENDER! */
}

Just to clarify: I'm aware I can get away with a single span and just switching the logo's background-position on hover, but the full CSS features cute CSS3 transitions for real browsers that aren't supposed to scroll the logo up and down.

OK, so, it's a PNG with 32 bit colour depth and, of course, transparency. All is fine in IE8 when I use no alpha filter at all or filter:alpha(opacity=0). But with the opacity set to 100, the mere use of the filter causes IE8 to go crazy and make all not entirely transparent pixels 100% opaque. Not that this particular image looks all that bad with this effect, but it's still annoying :D.

Now, I'm well aware IE8 is notorious for transparent PNG problems, with the troubles dating back to IE6 and its hideous solid cyan fill of the transparent areas. That one could be fixed with some IE behaviour black magic.

What can be done about IE8?

Upvotes: 4

Views: 4376

Answers (4)

Midas
Midas

Reputation: 7131

Use filter:none in your :hover class.

Upvotes: 0

Enrique
Enrique

Reputation: 4833

A simple fix: just add a background color to .logo_hover:hover and alpha filter works fine again.

Obviously this fix is not always useful (that is, if you can't use a background color below your png that mimics the real background).

Upvotes: 9

abudaan
abudaan

Reputation: 291

This worked for me:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='logo.png', sizingMethod='scale', alpha(opacity=100));

Thanks SLaks!!

Upvotes: 1

SLaks
SLaks

Reputation: 887453

You need to use the AlphaImageLoader filter, just like for IE6.

Upvotes: 1

Related Questions