My Drupal Blog

Sounds like a fun recipe huh? Well, having tried (and failed) previously to get this combination to work properly, I recently did some work for a client which demanded that .png files (Portable Network Graphic - image files which have transparent bits) were both used and looked correct in Internet Explorer 6.

Basically, I wanted to accomplish four main things:

• I wanted a real .png file with full transparency to look correct in IE6, and behave as it’s supposed to (i.e. letting you see some or all of what’s beneath it).
• I wanted to achieve this using only CSS – no Javascript, no PHP, no Flash, and no other trickery.
• I wanted this to work for background .png files, that is files which are called from the style.css file like so:
  #div_1 {
  background-image: url(images/druplicon.png)
  }.
• I wanted the solution to be as tidy as possible.

The trouble is that if you just try to load a .png into IE6 normally, you get the following outcome:

Ouch!

After some googling around, and a bit of trial and error, I came up with a solution which satisfies all of the above criteria. Here’s what I did:

Step 1

Firstly, I inserted the following code into my page.tpl.php file directly before the closing head tag:

Remember to replace ‘your_theme_name’ with the actual name of your theme folder (e.g. 'garland' or 'pushbutton').

If your Drupal install is in a subfolder (e.g. www/garland) you may instead need to use:

(which has an added ‘/your_theme_name’).

This code targets IE6 only, and tells it to load another stylesheet called ‘ie6_fixes.css’. The beauty of the code is that it will be ignored by all other browsers, which means that we can provide IE6 with extra instructions about what to do with our .png files. It also means that we can put our IE6 instructions in a separate file (ie6_fixes.css) and not clutter up our page.tpl.php file.

Step 2

Secondly, then, create the new CSS file. Give it a title of ‘ie6_fixes.css’, and save it to the root of your theme folder – i.e. the same place as your normal style.css file.

Now insert the following into your new ie6_fixes.css file. Again, as with the previous step:

• replace ‘your_theme_name’ with the actual name of your theme folder, and also
• replace ‘#div_1’ with your own div id or class.

(Line wraps marked »):

Again, as before, if your Drupal install is in a subfolder (e.g. www/garland) you may instead need to use:

And that’s it! If we now look again at our .png file as viewed in IE6, the result is exactly as it should be.

A small caveat:

I haven’t been able to get this method to work with repeating backgrounds yet. An obvious example would be if you wanted a shadow down either side of a centered design. The ideal way would be to cut a small image (maybe 1px high) and then repeat it vertically. My solution was to just create a larger/extended .png file which covers the whole repeating area. Whilst this solution isn’t perfect, it’s certainly not terrible either. Even though we are making a large (in dimensions) file, because it is mostly transparent the actual file size will remain relatively small, and it certainly looks a lot better than an IE6 mess!