Despite being a devout Mozilla Firefox user, as a web developer every now and again I revert to using Internet Explorer 6 (for testing purposes only I might add) and more often than not I remember where my decision to switch browsers all those years ago came from what with all those little quirks it has.

The introduction of IE7 to the browser family has seen a more robust stable browser that is less buggy and conforms to good HTML and CSS coding, but IE6, despite being the ginger stepson of said family, still has a large user base with around 16% of visitors to the Gencia website over the last month still persevering with it.

One such bug is the annoying flicker that often occurs when using rollover images. Despite a number of solutions such as a javascript preloader or altering cache settings, you can never be quite sure if IE will give you that annoying flicker as you rollover and the original image is replaced with the new one – sometimes it will, sometimes it won’t, such is the nature of the beast.

Although the following solution has been in use for a while, there will always be someone who hasn’t come across it yet and hopefully after reading this, you too will put this age old problem behind you.

Basically, you only need one image to be used as a background and CSS to shift it’s position when the rollover state is triggered, as opposed to swapping between two images in various states.

First off, set up your normal and rollover image as one double length image:

Set up your link with the image as a background – for the normal link state have the background image position as default and the width as half the image width, in this case 100px.  To achieve the rollover state, set the x co-ordinates to shift 100px to the left on rollover, this would be set as follows:

Resulting in the following rollover effect:

Which not only resolves the IE6 flicker issue, but you now have an SEO friendly, fully accessible, browser compatible, javascript-less rollover link.  Happy days.