Archive for January, 2007

I recently came across two very interesting CSS websites, CSSplay and CSS3.infoCSSplay is totally amazing, it's a real eye opener on what could be achieved with pure CSS madness. It contains useful implementations of CSS2 rounded corners, drop down menus, CSS image gallery and even drawing with CSS!

CSS3.info on the other hand is not so fun but definitely very handy to have as a developers resource for the up and coming CSS3 standard. It's ready and loaded with goodies that "will work" as and when browsers support features. It really beats having to read through uninspiring and long-winded W3C papers to get to the juice.

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.

Recently, I've been having fun creating pure* CSS drop down menus for Lemon, see: example 1, example 2 . These things really get the brain juices going. These menus are fully Accessible and supports IE6, IE7, Firefox, Flock, Opera, Netscape 8 and Safari. I'm going to keep at improving the code to make it re-usable, re-skinable with more browser support!I will release this to the open source community when I feel it's ready to withstand scrutiny. It also depends on whether there's enough interest! Time will tell...

*IE6 browsers require JS intervention due to the lack of support for the CSS :hover pseudo-class on LI elements.