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:
![]() |
![]() |
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.
.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!
hi
i use this script to fade in fade out
http://mrrena.blogspot.com/2010/09/simple-class-based-javascript-fade.html
i don’t use the :hover..
how can i fix this, with the solution you give?
gr.
Found solution..
but this in the style=”background:#fff;” then it works in ie8..
mvg.
Indeed, specifying a solid background color can overcome it, but that ruins the point of having a transparent PNG.
Internet Exploder can fade gif or jpg images just fine, so instead of having to use extra CSS to fix it, you could just change the image to gif or jpg.
hi
gif could be a option.. but the quality isn’t zo great.. do you know other way?
gr.
found it 😀
maybe you can put it in the article..
.img {
background: transparent; -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */ zoom: 1;
}
Thank You Janis!!!! I have been searching for hours to overcome the black outline issue with a .png in IE8 when using JavaScript to adjust opacity. Your Microsoft filter CSS mumbo jumbo solved the problem neatly.
Thank you so much, this worked perfectly.
This fixed my problem like a charming:
a:hover img {
border: none;
text-decoration: none;
opacity:0.5;
filter:alpha(opacity=50);
background:#fff !important;
}
Simple and perfect solution. It helped me! Thank you.
You’re welcome!
Thanks a lot
Ahhhh, this fix has just saved my sanity, thanks so much 🙂
my pleasure
Amazing. Solved my problem with Drupal’s Nice Menu module.
You saved my life. Thanks
I’m putting that on my resume 🙂
Thank You!!! Your fix worked straight away! I cant understand why there are always probs with IE!
Thanks a lot, it works great and saved me a lot of time ! 🙂
filter: none !important;
You are the BOSS!!! tkss
You have just saved my life!!! XD
Thanks everyone! I was worried back when I wrote this that the article would hard to search for because the problem doesn’t really have a name, but it’s apparently helped a lot of people. Internet Exploder is what they should call it
SolidlyStated ahahaha! I have used many solutions after searhing about 3 days but nothing worked! but you… save my life! it’s simple
I fadIn to 0 then to 1 my div (with transparent background png) on transparent background. IE7, IE8 р
hello from russia
THANK YOU!!! thank you thank you AND thank you!
This “add this” png thingy was driving me crazy.
I reported this solution to their forums with a reference to your page.
greetings from Greece.
nice! thanks, i was having the same issue with Add This, thanks so much! saved me oodles of time!
Glad this is still helping people! Let me know if there are any other CSS, HTML, or scripting problems you have. Always looking for new article ideas.
filter: none !important; works for me. Thanks a lot…:)
Oh geez. Thank you for saving me hours of time. Brilliant piece of code.
Always feels good to hear that, thank you!