IE6 PNG Fix WordPress Plugin

In developing a client’s simple web site (www.bobbyjmusic.com) I had the need to fix a bug in IE6 that doesn’t handle PNG transparency. There were a couple plugins that already existed, but it really messed with the layout that already existed.

So, I searched the internet. I came across the http://www.twinhelix.com website and implemented their code in my very first WordPress plugin.

After a couple days, I received some feedback from a user mentioning that it would be nice to be able to choose the PNG fix method between the 2 methods that twinhelix had produced. I figured it would be even better to provide a few options, and over the course of the last year I have made many improvements to the plugin. Currently, you can select from 5 different methods and the IE6 detection can occur server side (default) or client side for web sites that have the generated HTML cached at some level.

You can download the plugin by going to http://wordpress.org/extend/plugins/hits-ie6-pngfix/

If you are going to ask for help using the comments section below, please ensure you leave the plugin on Debug mode on your site before submitting your ask for help. It really helps with the diagnosis!

Add your comment

75 comments

Eelco Hoff - October 11, 2011 Reply

I had to use this plugin for a small site. It works great. Don’t ask why there this still is need for this plugin ;-). Our (large) business network still usses IE6 for a couple of months. Great job!

Heather - April 18, 2011 Reply

Thanks for this great plugin! I’m in the process of moving my site from localhost to a live server, and received some error messages in the process. Some were fixed by uninstalling and then reinstalling the plugin. However, 2 errors continued to show.

One was “Notice: has_cap was called with an argument that is deprecated since version 2.0!” I had received this on other plugins, and was able to fix it by changing the role identifier on line 401 from 10 to ‘edit_pages':
add_options_page('HITS- IE6 PNG Fix', 'HITS- IE6 PNG Fix', 'edit_pages', basename(__FILE__), array(&$this,'admin_options_page'));
(per this article)

The other error that I’m still getting is this notice:
Notice: Undefined index: hits-ie6-pngfix/hits-pngfix.php in /mnt/stor1-wc1-dfw1/371199/387128/wptest.ctsed.com/web/content/wp-content/plugins/hits-ie6-pngfix/hits-pngfix.php on line 134

I’m not super savvy with php, and I haven’t been able to figure out how to fix this. If you have any suggestions, it would be greatly appreciated!

Adam Erstelle - April 19, 2011 Reply

Hmm, in looking into the errors, I think I need more information about the second error you receive. Current version of the plugin shows line 134 as only being an End-Brace

krista - March 12, 2011 Reply

I use the Twin Helix v2 and it only works on some of the png images all the one in my navagation bar still show the blue around them any ideas as to why?

Adam Erstelle - March 16, 2011 Reply

I don’t know krista, can you enable debug mode on your website and give me the URL so I can help you troubleshoot?

Pingback: New Website Design

David - February 23, 2011 Reply

Many thanks! Works great for divs that have png backgrounds

Josh - January 12, 2011 Reply

Thanks eh. The TwinHelix v2 method worked great for me but
not the v1. I got that same red x and white border (missing image)
thing that Rachel was getting. Again, muchly appreciated. Now if
IE6 would only go away quietly.

Superfly Web Designs - December 8, 2010 Reply

Thank you! The hits plugin is fantastic and has saved me headaches with file paths, etc..

Adam Erstelle - December 7, 2010 Reply

Yes, it should work on any server (i developed and tested it on a local server)

rexusdiablos - December 7, 2010 Reply

Great plugin but is it supposed to work on a local server?

Rachel McCollin - November 25, 2010 Reply

Hi,

Thanks for this plugin – it saved me a lot of work on a fairly image-heavy site which needs to work in IE6.

However I’m finding that using the fix that works best on my site, I get a little red x and a white border aorund my images – as if they weren’t there when in fact they are. Admittedly this is testing in adobe browserlab, not IE6, so I can’t be sure what’s really happening.

The url is http://compass-design.co.uk/cdwp

Have you come across this before?

Thanks.

Rachel.

Adam Erstelle - December 8, 2010 Reply

Hmm, it appears I have a bug with the supersleight method, where the “x.gif” is not having the proper plugin path. I will look into a fix

James - November 15, 2010 Reply

Hi Adam
Just want to say thanks for contributing to the WordPress community with this plug-in, you have helped a lot of people. cheers!

ivan - mundoabsurdo.org - September 2, 2010 Reply

Muchas gracias! gran trabajo :)
Thank you so much! Good job!

Adam Erstelle - August 3, 2010 Reply

The space for the endif should have been addressed in plugin version 3.1.4. If you are still having issues with this please let me know!

Orla - August 3, 2010 Reply

Just had a minor panic attack when I noticed my site was blank in IE7 & 8. Thanks a mill Justin for the heads up re: the space in hits-pngfix.php My [endif] –> occurred on line 167 if anyone comes across the same issue.

Cheers!

Gervásio - July 24, 2010 Reply

Hello Adam,

I have made a Portuguese Brazilian translation for IE6 PNG Fix for my own use. Now I want to send this translation to you, as a way to say ‘thanks for the plugin’. Please contact me via e-mail, so I can send you the translation file.

Regards.

Gervásio.

bingjie - July 16, 2010 Reply

nice idea…thanks

Justin Barkhuff - July 15, 2010 Reply

Shoot, the WordPress ate my comments. Changing the last part of line 185 in hits-pngfix.php from this…

endif] –>

…to this…

endif]–>

…fixed my problems. Yep, that extra space caused IE 7 and 8 to not render the entire page.

bingjie - July 12, 2010 Reply

great,,,I was worrying about the clients browser version. thanks a lot.

Bill - June 29, 2010 Reply

Great plug-in. Many thanks.

Orla - June 25, 2010 Reply

Oh my goodness, you’re a lifesaver!!! Great plugin. DD_belatedPNG worked for me.

Cheers

Matt - June 14, 2010 Reply

Many thanks for this plugin. Been spending a while looking for a working solution. :)

After trial and error with all the available methods, I ended up using DD_belatedPNG.

Richard Gunn - June 13, 2010 Reply

Cool – saves me from maintaining a custom version :)

Adam Erstelle - June 12, 2010 Reply

I’m just about to add the ability to switch between server and client side detection.

Richard Gunn - June 12, 2010 Reply

Great plugin – unfortunately there appears to be a problem with page caching.

If the page is not cached and the first browser to request it is IE6, then the ‘fixed’ page is cached and served to all subsequent browsers that request it – this means the fix code will run every time on the cached page and may cause problems with other browsers.

Conversely, if a non-IE6 browser requests the page for the first-time, the page will be cached without the ‘fix’ code and then if IE6 later requests that page, it will get an unfixed cached page.

It’s better to leave the browser detection to the browser by using the IE conditional comments.

I’m changing the wp_head() function in your plugin – I’m ignoring your browser detect code and will always write out the javascript links between conditional comments – this will ensure that a cached paged always contains the links to the javascript.

Perhaps you could add an option for sites that used cached pages?

Mr.Mark - June 10, 2010 Reply

Does this plugin work properly on WP3?

Adam Erstelle - June 10, 2010 Reply

It sure does!

Paul - May 2, 2010 Reply

Thank you so much for this plugin! You are a lifesaver :)

Matt - March 10, 2010 Reply

I am trying to confirm that this will fix the problem I am having with IE6.

I have a png image that is transparent except for some scripted writing. But when I use a href with the png the rectangle is high-lighted and so the writing cannot be seen.

Here is the code:


Adam Erstelle - March 12, 2010 Reply

Hi Matt, do you have the plugin installed, and if so what is your website so that I can take a look?

Julia - March 5, 2010 Reply

Hi,

It doesn’t seem to be working for me. The CSS is before the fix. It is on DD_belatedPNG. Is there anything else I can try?

http://stellaandmoon.com.au/art/

Cheers,

Julia

Adam Erstelle - March 6, 2010 Reply

Hi Julia, i think your issue is that it’s your “a” element that has the image, and that element (or class) is not in the css selector. Add “.stellagallery” to the css selector and you should be ok?

Jeff - February 5, 2010 Reply

This works great, but we have out entire site served up via SSL. The plugin generates code for http links to the javascript files, but we need https. Any chance you could add a fix in the next release? Thanks!

Adam Erstelle - February 16, 2010 Reply

I will certainly take a look as soon as I can.

guille - January 30, 2010 Reply

Gracias por postearlo lo andab buscando

Adam Erstelle - December 29, 2009 Reply

I’ll send you an email so you have my address. Thanks for the translation work!

benoit - December 28, 2009 Reply

hello,

i have made a french translation for the ie6 png fix but don’t know how to send it to you

Adam Erstelle - December 3, 2009 Reply

Unfortunately, not all methods work for all people. If were that easy, there would be only one!

Nav - November 24, 2009 Reply

Great plugin. The only problem i am having is that twin helix v2.0 hides some background png images. not sure why.

Gregg - October 30, 2009 Reply

Hi Adam

Thanks for putting in the hard work on this plugin. Unfortunately, I’m having trouble getting it to work with any of the available methods. A gray background still appears within IE6.

I assume that it’s a problem with my child theme or the css file. What should I look for in order to correct the problem? My site is http://www.greggwatt.com/crossline.

Thanks.

Adam Erstelle - October 21, 2009 Reply

At the least you will probably want wp_head() to echo out it’s code. I have it just prior to the HEAD tags in HTML.

Jack - October 21, 2009 Reply

Thanks a lot for this. As I wrote the them by myself. I am not so sure probably I missed something. Could you tell me which code should be put into the html. Thanks.

Adam Erstelle - October 20, 2009 Reply

Jack, I had a look at your site, and your HEAD has an unusually little amount of code in there. Check to see if your theme is allowing wordpress to place it’s code into your HTML.

Adam Erstelle - October 20, 2009 Reply

Abdul, I had a look at your website, and it the problem may be the way you are defining your image as the background….but most likely it is because your are applying your styling after the fix is applied. Move your css files to be before the HITS-IE6 PNGFix is executed in HEAD.

Abdul Ibad - October 15, 2009 Reply

it’s does work in localhost.
but doesn’t work when it’s has been uploaded to my website.

see (with IE6)
http://ibad.bebasbelanja.com

Adam Erstelle - October 13, 2009 Reply

Yes, the plugin does work on 2.8.4, but it looks like many themes might interfere with it.

Jean - October 13, 2009 Reply

Is this working on wp 2.8.4?

Jack - October 8, 2009 Reply

Hi Thanks, it’s http://www.doublejdesign.co.uk I tried on IE6, the grey background is still there.

Adam Erstelle - October 5, 2009 Reply

What is the URL of the site you are having problems with? Do the images still have the grey background or is the plugin causing problems with another plugin?

Jack - October 5, 2009 Reply

Hi, thanks for the plugin, but I have the same problem with WP 2.8.4 as the plugin seems not to be working for now. I tried different methods. Any sugguestion? Thanks.

Upekshapriya - September 26, 2009 Reply

Just thought you’d like to know that you can find SuperSleight at http://allinthehead.com/retro/338/supersleight-jquery-plugin – so you can add it to the credits.

It’s fantastic having all these options in one plugin – for my purposes DD_belatedPNG turned out to be the fastest and the best for background images. Thanks a lot.

Adam Erstelle - September 18, 2009 Reply

I’m about to setup a new site. I’ll try it out there and see what may be conflicting.

Elephant - September 17, 2009 Reply

Hi!

I’ve tried this fix with the default theme of WordPress 2.8.4 and it’s still not working. Are you sure it should work with this newest version of WP?

Tnx in advance.

Tracy - August 26, 2009 Reply

Got it working my doing it manually but had to place it in stylesheet as conditional comments still do not work.

Adam Erstelle - August 25, 2009 Reply

If you are having problems, check your theme. Some theme’s will have CSS that conflicts with any PNG fix in IE6. There have been a couple people experiencing this problem that I’ve helped.

Tracy - August 25, 2009 Reply

I cant seem to get this working in wordpress 2.8.4. I have tested the last commenter’s url too. I think it maybe a wordpress bug as I disabled plugins and tested my own conditional comments and that wouldn’t work either.

Nicole - August 24, 2009 Reply

Using this on a WP site for a client, great plugin, except that no matter which method I choose, all of my .png images are simply vanishing instead of having transparency work. Any ideas?

lalji - August 18, 2009 Reply

many thanks Sir :)

http://www.seoname.com

Martijn Derkzen - August 18, 2009 Reply

Hey,

Super plugin!! Works fine.
I had some trouble with the plugin because of my css file, but with excellent service it works great!

Thank you!

José Luís - August 16, 2009 Reply

Hi!

Great plugin! Do you have any plans on supporting DD_belatedPNG?

As I could see on this comparison if it’s not the best, it’s, at least, one of the smallest…

Ciprian - July 19, 2009 Reply

Great idea and great plugin! I was actually going to build this but it seems you started before me. I have another plugin (live countdown timer) that i’m upgrading to make it transparent shortly, and i want to let you know that I will be referring people to your plugin to use it in case they want ie6 transparency to work with my plugin.
Thanks!
And keep up the good work!
Cip

baron - July 10, 2009 Reply

Works great, thank you