Oliver Ker Design

Transparent PNG in IE6

Yes, we all hate it, and yes we want to stop supporting it! BUT it still exists and that is another topic.

Using transparent PNG’s on the web makes sense and IE6 is a royal pain in the, when it comes to using them. I have used and tried a few different methods, all have their own pro’s and cons.

Couple of the others

• Supersleight is great and works fairly well, it handles background PNG, but I ran into a problem when my images were pixel positioned.
• TwinHelix Is probably the best I’ve used to date, it uses a blank gif to work its magic and I have used this in my arsenal for the past few sites I have built. Then for some unknown reason (I was probably half asleep and not concentrating) I couldn’t seem to get it to work. There are only a couple of files to upload and direct to the correct paths, maybe this could be too complicated for me on this occasion.

Found

I opened the search again for another fix and found DD_belatedPNG which could be the perfect solution.

You can find the files and instructions on the site but I thought I’d share how I use it a little different from the instructions

Once downloaded upload to your server – I uploaded to my js/ folder and call it in the head of your document,

<!--[if IE 6]> <script src="js/DD_belatedPNG.js"></script> <script src="js/DD_belatedPNG.config.js"></script> <![endif]-->

1. Use the < !—[if IE 6]> statement as I only need to call this if the browser is Internet Explorer 6
2. Next I call the actual DD_belatedPNG.js javascript
3. Notice on the original instructions Drew calls the script on the page – All I have done is created another config file with that information in it. – This is just to keep my HTML a little bit tidier.

Whats in my config file?

The DD Belated instructions shows use the ID and Class’ where the PNG appear, but I figure why not use the reset file by Eric Meyer which will look like this

DD_belatedPNG.fix('html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td');

I am still testing this so if you find anything wrong, please let me know and I can update this post.