List-style-image and IE

Mon 15th November 2004 14:10 EET

We've wrestled with a very annoying CSS problem on one of our client's site. The fact that the problem occurs only on some, very random, versions of the MS Internet Explorer hasn't helped the debugging process at all. Here's the ugly details:

The site contains a regular left-hand-side navigation that actually consists of <div> tags. These <div>s are styled to appear as unordered list items, and we have added an image to represent the bullet that appears next to a selected link (basically only one bullet shows per time). Nothing special in this really.

Now, the problem was that when an end-user passed mouse cursor over the selected link, the MS IE re-loaded the bullet image causing the navigation to twitch 1-2 pixels (up and down). Obviously a very annoying behaviour for the eye.

For my version of the MS IE (6.0.2900.2180.xpsp_sp2_rtm.040803-2158), the fix was simple enough: add single quotes to the url() call for the list-style-image (i.e. list-style-image: url('/path/to/image.png');).