glass

Hi again guys! As you can see I’m not dead :p

I know it’s been forever. I’m really sorry. I write this blog to help out everyone that is interested in CSS. I don’t earn money with it, so unfortunately I can’t spend all the time I want writing. I’ll try to improve my timing though :)
Well, no more introductions. Let’s get down to business.

We all hate IE6

This browser is crap and we all know it. Unfortunately, some clients demand support for this browser so we can’t avoid having some workarounds for it.

PNG Images

.png images have the best quality and fidelity for our web designs. Their best feature is their seamless and smooth transparency. We can achieve transparency with .gif files but their smoothness are not even close to .png files.

There are many times where our designs need a transparent .png and we also need to add support for IE6. So… what do we do?

PNG fixes to the rescue!

PNG fixes are mostly javascript (sometimes css) solutions for fixing IE6’s lack of transparency support for.png files. There are various PNG fixes. Here are some of them:

The good thing about PNG fixes :)
  1. They are easy and fast to setup.
  2. They get rid of the problem in most cases.
Problems using PNG fixes :(

Well, unfortunately, it’s not everything as nice as cupcakes and rainbows. I’ve encountered some problems using PNG fixes:

  1. Background-image support is quite poor (repeats and positions specially).
  2. It’s a pain in the ass if you are using CSS sprites.
  3. Sometimes the proportion of the images gets screwed up.
  4. You add another javascript file to your page.
  5. In CSS workarounds the code isn’t pretty and fails W3C’s validation.

Ok… so what now?

Well, I have my own workaround for transparent .png’s in IE6. Maybe you will like it, maybe not, but I wanted to share the technique in case it comes in handy for you.

I don’t use transparent PNG’s for IE6

That’s right. I use .gif files instead.
Sorry to dissapoint, but I believe this is the way to go.
The quality of our images decreases of course, but we are embracing and accepting the browser’s limitations.

Using the technique:
HTML code
<div id="myDiv1" class="section"></div>
<div id="myDiv2" class="section"></div>
<div id="myDiv3" class="section"></div>
CSS code
.section {background:url(briefcase.png) repeat 0 0;}
     #myDiv1 {background-color:#333;}
     #myDiv2 {background-color:#666;}
     #myDiv3 {background-color:#999;}

Ok, so this will give us a bunch of coloured divs with a briefcase on their background. This will work for every browser except IE6 (that instead of being transparent, it will have a light-blue background below the gradient image).

Fixing it for IE6:

We will use the star or holy hack to refer only to IE6.

* html .section {background-image:url(briefcase.gif);}

That’s it! We force IE6 to load a .gif file instead of loading the .png file.
Take a look at the final example

Benefits
  1. Simple, easy and short.
  2. Respects the background properties defined for all browsers (repeat + position).
  3. Compatible with CSS sprites (you just save the file in another format).
  4. Doesn’t mess up image proportions.
  5. W3C valid.
  6. You don’t add another file to your <head>.
Drawbacks
  1. The quality of the transparent image decreases (in some case more evident than others)
  2. You have an extra image file in IE6.

Conclusion

IE6 can’t handle transparent .png files. It’s a deficiency of the browser. This technique gives the browser a file type that it can handle and not another thing that it’s not really meant for it.

This is not “THE ULTIMATE SOLUTION” but gives you another possibility to solve these type of problems.
Your experience will help you decide in which case you should use option A or B.

I hope it helps you. Cheers! ;)