IE 6 yuck! Two choices for PNG Fix for not even a buck!

Am I the only one that wants a t-shirt that says "I Don't Support IE6"? Let's face it, not many people would get it, and I would just give the impression that I am a negative person. The fact is... I am a realist, and IE6 is going to be around for a while longer, at least long enough for me to keep finding newer better stronger ways to work around troublesome browser.

Building It Into The Theme

Skip To The Easy Way

The GreenNBlack Theme for Drupal comes with a png fix for the logo, and for many many people this will be all you need. As I work with this theme I can see it is really written and cared for... thanks cmstuning.com. As I develop this site for the Hayward Area Recreation and Park District's 65th Anniversary... I am going to continue to customize and push the theme beyond what a contributed theme could ever account for.

So here is the site from IE, with the 'a' tags having a png background, and displaying poorly.
[inline:before.png]

Let's Get The File

• Download the software from www.dillerdesign.com. It is worth the time to read thought the information to become familiar with the details.

[inline:downloadlink.png]

Now We Get Typing

• Open a text editor and paste in the following code and save the document as mybelatedPNG.js (or substitute with a name of your liking... must be a .js file)


DD_belatedPNG.fix('#logo img');
/* EXAMPLE */
/* string argument can be any CSS selector */
/* using .png_bg example is unnecessary */
/* change it to what suits you! */


• It will become obvious as you use this fix... but I will state it here for clarity. The css selector inside the (' ') needs to be the same selector that the background image is located. So if your CSS background image is #logo img, and you use #logo in this script... it will not work
• Working with this existing theme (I am editing greenNblack for this project) requires me to use FireBug or look in the CSS to find exact selector and use it in the file.
• Here is an example the background image is applied to the #sub_header a element. When I want to apply the PNG fix to that, I will have to use #sub_header a to get it to work, using #sub_header will not work.

[inline:itsa.png]

• My current file called mybelatedPNG.js looks like this (i'll be adding and adjusting over the next few weeks, and yes, I left in the comments)


DD_belatedPNG.fix('a');
DD_belatedPNG.fix('.title-submit');
DD_belatedPNG.fix('#logo img');
/* EXAMPLE */
/* string argument can be any CSS selector */
/* using .png_bg example is unnecessary */
/* change it to what suits you! */


• When creating my own theme, I plan to use .png_bg in my template files and CSS to minimize the # of lines in this script (as suggested on the download page). For now, I am working with greenNblack and adjusting this script (specifically mybelatedPNG.js) to suit my needs.
• Upload the two js files into your theme directory. If you have or want to use a specific js directory (as I am doing) feel free to create the directory

[inline:filelocations.png]

IE Stands All Alone... So Only Load If IE6

• We only want to apply this script if IE6 is detected, so I added both js to my template.php with a conditional statement included. Remember the name if the theme is greenNblack, so you will need to change that name in the code below or it just won't work. Please note it is in 4 different places


/**
* IE detector
*/
function greenNblack_ie_detect()
{
if (isset($_SERVER['HTTP_USER_AGENT']) &&
(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
return true;
else
return false;
}

/**
* Add pngFix script to fix .png transparensy bug in IE6
*/

if (greenNblack_ie_detect()){
drupal_add_js(drupal_get_path('theme', 'greenNblack') . '/js/DD_belatedPNG.js', 'theme');
drupal_add_js(drupal_get_path('theme', 'greenNblack') . '/js/mybelatedPNG.js', 'theme');
}


• At this point in time both scripts are in my /js directory, and I have saved my template.php file back to my theme directory.
• Remember to clear the cache

[inline:alldone.png]

While testing this fix, I have some very funny results applying it to the wrong tags... stick with it, you'll get it.

No solution will always be perfect. You may notice little things that don't work the way you wanted them to and you will need to make some adjustments. The question for me is which fix, when I need it, will require either the least amount of effort (changes), or will be the easiest to implement. As for PNG fix, I think I like this one. What did I have to fix... well when I was done I noticed that because I had applied the fix the 'a', which was a descendant element of #sub_header, for some reason it added extra space to the top of the div#sub_header element. I added a few lines of css to my conditional IE css file (that also only loads when IE is detected), and it works just fine.

Do It With Drupal

Ready for the easy way. If you have access beyond the theming layer... perhaps you are developing a site and are going to have access to install and change modules, then there is a quick and easy or... it's you site and you just need a PNG fix. Then PNG Behave works like a charm... even with background images... and it's fast and easy.