Proof that IE6 is crap

I have more than often had to fire-up IE6 out from the “un-loved” software repository to get kicked right back in the face with weird CSS bugs. I believe those reading this must be aware of at least one CSS quirk in the IE6 browser. For example, the PNG Alpha Transparency bug, fixed by Microsoft’s proprietary AlphaImageLoader or the strangely named Peek-a-boo bug requiring a position relative on the buggy floated element. These are just two out of what must be endless lists of problems. At the top of the annoyance list though must be the IE6 Background Flicker bug. When viewing a site using background images as hover/un-hover states IE6 will re-load a fresh image every event change on that element. The effect is a brief flicker on hover. By the way, this happens locally too but it’s too quick for the naked eye to notice. Firefox, Safari, Opera, Flock and probably any other browser on the planet does not have this problem! Worst still the fix is so simple, you wonder why the problem existed in the first place.To fix the IE6 Background Flicker bug use the document.execCommand method. In your CSS file add the following:

html {
  filter:expression(
    document.execCommand("BackgroundImageCache", false, true)
  );
}

Yes, it’s that simple! I found this fix at Ajaxian.com. You’d probably want to implement some sort of sniffer to wrap around this fix. I used an IE conditional which serves the purpose nicely. For more solutions refer to the Ajaxian link above. Believe it or not, before finding this fix I looked into image caching, server cache control, CSS trickery and smashing the keyboard!

Lastly, apologies if anyone is offended by the title of this post. I’m venting my frustration after wasting many hours fixing perfectly valid CSS to cater for silly IE6 bugs.

4 Comments

  1. gabriel at

    html {

    filter:expression(

    document.execCommand("BackgroundImageCache", false, true)

    );

    }

    This lines not function.I have a very simple example but it doesn't work

    This is the code:

    Flicker Bug

    html {

    filter:expression(

    document.execCommand("BackgroundImageCache", false, true)

    );

    }

    A:link, A:visited

    {

    text-decoration: none;

    background: url(ff_images/radioButton_basic_up.gif) no-repeat;

    background-position:right top;

    padding: 0 20px 0 0;

    }

    A:hover

    {

    text-decoration: underline;

    background: url(ff_images/radioButton_basic_down.gif) no-repeat;

    background-position:right top;

    padding: 0 20px 0 0;

    }

    Link 1

    Link 2

    Link 3

    Link 4

    Link 5

    Please, help me

  2. gabriel at

    html {

    filter:expression(

    document.execCommand("BackgroundImageCache", false, true)

    );

    }

    This lines not function.I have a very simple example but it doesn't work

    Please, help me

  3. caphun at

    Do you have an example I could look at?

  4. Forez at

    This is a great topic!

    My opinion is that if Internet Explorer doesn't existed, the Earth was going to be the web developers heaven :) The IE's JavaScript runs way too slower than any other browser. The CSS position:fixed is completely missing in IE6. Today I noticed a buggy behavior on IE7 when trying to wrap some tables with the display:inline property… Countless are the times I have searched for workarounds and fixes just to make my page work on IE. IE really is a big pile of … and not only 6.