Over 10 years ago, IE6 had major problems when dealing with PNG transparency.

In their infinite wisdom, Microsoft continued this comedy of errors years later with Internet Explorer 7 AND years after that with Internet Explorer 8!

In this article, I’ll show you how I fixed the ugly black outline issue with 3 simple words.

The Ancient IE PNG Issue

If you’ve been a web designer for any length of time, you already know about the notorious IE PNG transparency issue. It has been the bane of many designers and has spawned a great number of fixes. The most popular of these was probably IEpngfix, which happened to be built for the decade-old IE6.

IE7 and IE8 can handle static 24-bit PNG images with transparency, but reverts to the solid black alpha channel characteristics of an 8-bit PNG when the image transparency is altered using CSS (or JavaScript which manipulates CSS).

Here’s an example with a normal PNG on the left and a bugged PNG on the right:

IE Logo IE Logo Ugly Black PNG Background

Causes of the Problem

More often than not, designers experience this issue when doing one of three things:

  • Using the CSS filter property to set the transparency of a PNG.
  • Using the CSS opacity property to set the transparency of a PNG.
  • Using JavaScript code to fade the image in or out.

These situations result in the ugly black background on your PNG image as shown above.

Solid Tip: If you are using CSS to change the opacity of an image on hover, you should instead create a sprite that has both versions of the image. If you need to know more about sprites, read this article.

If you use the CSS hover pseudo-class with your PNGs, you may be experiencing the bug when hovering and not even know it. As you can see from the picture at the top of this article, I found the bug in my social icons. While I made the images myself, AddThis.com was providing the share functionality.

It just so happens that, upon loading, the AddThis JavaScript file applies a CSS opacity to hover images, causing my icons to have the buggy black background in Internet Explorer.

The Solution

The solution, in this case, was simple. You only need to assert your CSS authority by overriding any transparency changes with the !important declaration.

CSSview code 
 
.addthis_button_delicious:hover {
    background: url(images/delicious.png) right; /*BROKEN*/ 
}
 
.addthis_button_delicious:hover {
    filter: none !important; 
    background: url(images/delicious.png) right; /*FIXED*/
}

Notice the fix – filter: none !important;

This declaration will stop any rogue scripts like AddThis from adding opacity changes to your images and allow them to look normal in IE7 and IE8.

Had I been experiencing this issue while trying to fade an image with a script, then I would have had a harder time (a scenario that would be outside the scope of this article).

This simple addition to the CSS is not a hack, requires nothing else, and is completely valid. If it helped you, leave a comment!