CSS image rollover flicker – the Blogger solution

I was very interested to see how the problem of flickering CSS background images in IE6 was resolved in the construction of the new Blogger.

In my experiments the flicker is manageable if a text replacement technique is used, i.e. when the text for the link with the rollover effect is hidden entirely. There seems to be no way to combine text and background image change on hover in Internet Explorer 6 without the image and cursor to flickering horribly.

The wise makers of Blogger's new interface have instead opted to hide the image rollover CSS from Internet Explorer, relying instead on the usual colour change of the link text itself to provide the rollover effect. The background image remains as an effective indicator of the on-state of the tabbed menu. Meanwhile decent browser users get to enjoy the slightly fuller experience of the image rollover combined with the text colour change.

Recreating and replacing text in a background image, although it can look great with assured antialiasing and flexible font selection, has distinct disadvantages; Less reuse of downloaded graphics (as you need to make a unique image for each link), text resizing is not available without an even greater file size penalty and pixel based text adds significant complexity to the creation of navigation that might be built from a database.

Curiously the flicker is not a problem in version 5 of Internet Explorer. I have not had the chance to check if Blogger takes advantage of this particular browser's unexpected cooperation.