As you likely know, IE6 (and below) cannot handle PNG images that use alpha transparency. PNG produces graphically superior results compared to a transparent GIF image, which will often have a white fuzzy border. There are various "fixes" for this particular IE problem on the Web, but sometimes their application can have undesirable results, or the fix involves invalid XHTML or CSS. In my case I was prepared to accept grey backgrounds on the mini-icons used on bioneural.net, but there was one particular image where this really bugged me. Here's how I fixed it.
A general fix
At first I tried a JavaScript-based solution which was easy to install and automatically applied to all PNG images. Simply load the script in your header, enclosed in IE-specific conditional comments:
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->You can view and download pngfix.js here. Notice all those floats? I suspect they were responsible for my giving up on this method. For example, it messed up the feed icons in my sidebar (right, below), and for some reason that particular icon failed to complete loading in the IE progress bar (even though it was obviously being displayed). Weird. I don't like weird:
I did initially convert the affected images to .jpg (since this issue only affects floated images with a .png extension), but then decided "Why should I bend over backwards just for IE?". I reverted to the PNGs and continued to look for another solution. There's always another solution...
A specific fix
I subsequently discovered a solution that makes use of proprietary CSS and conditional comments for IE. I have few qualms about using proprietary tricks to fix proprietary mistakes!
Here's the relevant code that sits in my head element:
<!--[if lte IE 6]>
<style type="text/css">
#pngfixband {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src='<?php bloginfo('template_directory'); ?>/styles/bioneural/whiteband-9rules-mt.png'); padding-top: 115px; }
</style>
<![endif]-->In my header div I've given the image I want to target an id of "pngfixband":
<p id="whiteband"><a href="http://www.mediatemple.net/.%3E/9r-bioneural.net"><img id="pngfixband" src="<?php bloginfo('template_directory'); ?>/styles/bioneural/whiteband-9rules-mt.png" alt="White band" width="115" height="115" title="bioneural.net recommends hosting with (mt) Media Temple" /></a></p>Notice how the padding (115px) in the styling corresponds to the height of the image specified in the markup? That's important.
In contrast to default behaviour (left, below), IE now does a respectable job of displaying this particular image as per my intentions (right, below)—but no other PNGs are adversely affected in the process:
No issues either for the XHTML or CSS Validator.
del.icio.us,
Digg,
StumbleUpon
Translate this page: DE | ES | FR
Follow tag feeds: css, howto, Internet, javascript, webdev.
Buy for yourself on Amazon.com or Amazon.co.uk, leave a "tip"
Ahh, very cool Bruce. I'll have to examine this more closely. I tried using a PNG fixer for general PHP some time ago but gave up after much teeth grinding. Trying to make it work in my WP theme was pretty tough.
Rob, initially I just hid this particular PNG from IE (using !important), but I'm supposed to display a link to (mt) on every page as part of the 9rules (mt) partnership deal. Since hiding wasn't therefore an option I had to fix this eyesore in IE. I've actually spent a lot more time than I planned modifying my CSS from pure standards-compliant code to include multiple (still compliant) hacks for IE. My site's appearance in IE has gone from "jeeezsh" to "not too bad" and I've learned a few handy tricks in the process. Next on the to-do list is to move most of these hacks into a separate IE6-specific CSS file that I can simply "switch off" if and when IE7 is widely adopted. I would then use the IE conditional statement to load that external file.
Hi Bruce,
for correct PNG behaviour in MSIE, I use the following JavaScript:
[Edited]In the HTML code I declare:
[Edited]Credits for this script go to: http://homepage.ntlworld.com/bobosola
I hope this is useful for you.
Cheers,
Jasper.
Wow,
seems like half of my code is messed up by WordPress (K2?) :-(
I'll mail my complete comment
Jasper thanks. Yeah, WP had trouble chewing on that! Thanks for e-mailing the full code; it's actually the same code I've linked to above as a general fix. As I say, since it uses floats it buggers up several elements of my layout. For this reason I prefer to fix things on a case-by-case basis. I probably should make it clear that the specific fix can be applied to more than one image (you just need a unique image id to link to the corresponding proprietary CSS.
wow...big big thanks, you made my day :D
cheers,
Axel
You're welcome Axel, but TJKDesign is the hero here! The other nice thing about this particular technique is that you could move the proprietary CSS to an external file (likely containing other IE CSS fixes), and conditionally link to that. When IE6 usage falls off (IE7 is planned to be a forced upgrade), you could simply delete the conditional link to the ie6.css file (or whatever you called it).
This image-specific fix worked much better for me than the Bob Osola general fix for every png on a page. The general fix caused the image's background to flash into view for a second on page load in my IE 6 browser. There is no flash of visible background with this fix. Thank you very much.
Thanks for sharing that observation Oliver; glad the fix worked for you too.
You just saved my life, i had been banging my head on the wall and cursing Microsoft !
Thanks,
Thank you so much! I had been using the pngfix.js script as well until I found that it broke my Google map API. I, too, was banging my head against the wall looking for a solution without having to give up my alpha-transparent PNGs (stupid microsoft!). This solution works cleanly and brilliantly! If you want to check it out in action, see my map page on my website:
[Commercial link removed]
Thanks again! (of course, if people wouldn't use IE6 that would relieve a lot of headaches!)
--DCP
Hi I have tryed ur solution and it works! but im using transparent png images as a bakground for my menu butons and it's not working. is this fix valid for background images also or im doing something wrong?
ty for ur support
F.
Fabrizio, this trick is for fixing transparency for inline images. I don't believe it can be applied to an image loaded from CSS. However, for menu buttons you could combine a transparent inline image (plus the fix) with a transparent background GIF (no fix required), couldn't you?
Hello Bruce,
Thank you so much for the post. I was going crazy trying to get transparent inline png's (for logos with links) to work in IE6. Great trick with the padding!! You are a superstar.
Re #12 and #13 - it definitely is possible using a similar technique to the above for png's as background images in CSS.
I am not sure who the brains is behind this technique but I do remember stumbling upon it somewhere on the web - and it works for me every time. I am also not intending to be a guru on the subject - just thought I'd add to the png love as this works for me in IE6 everytime.
I setup a page here.
Hope this helps.
this saves my day. thanks
Thanks for working out this code, it works really well on your site, but I can't seem to get it to work correctly on mine, even though I have copied your directions exactly. The test site is:
[http://www.websitecreation.co.nz/SolutionGroup/index.html]
the png is the footer. I don't have a copy of IE5.5 or IE6 on hand, so I am relying on NetRender, an online IE6 renderer.
Maybe if someone with IE6 could let me know if this is working correctly??
Thanks :)
Kia ora Samalah. It's not my code; I'm just helping to share it ;-)
Are you developing on a Mac? If so you can run IE6 under X11 in OS X as here, or if you use virtualization or a "real" PC, run IE6 and IE7 at the same time as here.
To my eye your site has alignment errors in both Safari 3 and IE6; I think this is a box model issue and not down to the use of PNG. Fix this and the images should fit together correctly. I'll send you some screen caps by e-mail.