Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I saw this post on SO but the selected solution got a couple of really unflattering comments...

I need to add a png fix script to my theme to handle issues with PNG support on IE6 predominantly. I have customers who say that IE6 is upwards of 1/3rd of their traffic if you can believe that. I know that Google is completely abandoning IE6 in Google apps, including Gmail this year, which will hopefully put the nail in the coffin, but until then...

What's the best PNG fix for use with WP?

Ideally, I want something that works but is very concise in code footprint.

share|improve this question

3 Answers 3

up vote 2 down vote accepted

Drawbacks using javascript to fix the PNG issue:

  • higher chances theat the IE-6 visitor doesn't have javascript turned on, than on a modern browser
  • ~1-2 sec. flicker until page finishes loading and javascript completes processing (on IE-6 js is slow)
  • fixing repeating transparent background images is very buggy in these type of scripts, in most cases you'll get a CSS mess...

So I don't recommend any PNG "fix" script. Instead create 8 bit PNG images with alpha transparency:

http://www.ethanandjamie.com/blog/37-user-interface/81-png8-transparency-without-fireworks

You'll need to follow that tutorial because Photoshop can't save in this type of format. Then simply use them for IE 6 in a dedicated stylesheet.

The only drawback here is the lower quality of 8 bit (256 color) PNG images converted from a image with a high number of colors (which should really be rare on a website because of their size). But that shouldn't be a problem because IE 6 users are used to sh* quality anyway :)

share|improve this answer
    
+1 for going the extra mile. Cool idea. I'd never thought of that. –  Scott B Jan 24 '11 at 4:06

The best png fix I have found is http://dillerdesign.com/experiment/DD_belatedPNG/. It is only 7kb. I have found it to work on any element (image or background image) I have tried without issue. It's the easiest method I have found.

The script not tied to a specific JS library so you can use it anywhere. I would recommend including the file in a conditional comment that targets IE 6 and you don't need to worry about the extra 7kb being added to the other browsers.

For HTML images I find it easy to add a class to the them via jquery ($('img[src$=.png]').addClass('pngFix');) then you can call that class in the DD_belatedPNG fix and it will get all the png images added through WordPress by the user.

share|improve this answer

I really like this plugin: http://wordpress.org/extend/plugins/hits-ie6-pngfix/

It works really well and includes multiple options for scripts to use, and it does everything for you.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.