Tips and workarounds

Solution to list-style-image problems in IE

(Documented 7 nov 08)
So you have discovered the problems with list-style-image in Internet Explorer and are beginning to wonder if it's just you or if there really is a bug. It seems there are in fact several related 'features' of Internet Explorer (IE6, IE7, IE8 at the time of writing) that concern the list image property.

It is often difficult to get the image to align with the text consistently across browsers due to the non-standard behaviour of IE, but perhaps even more annoyingly, a peek-a-boo type bug is often triggered. The list bullet images arbitrarily appear (or not!) and disappear when you mouse over the list or scroll the page. Here is a summary of the Internet Explorer issues:

IE only correctly supports the :hover pseudo class in the a tag
The list image property is only supported in the li tag
List image alignment does not fully conform to the W3C specification

This means that the list-style-image property cannot be used in Internet Explorer at the time of writing to create dynamic list images using the :hover pseudo class. All is not lost. There is a solution that does not require any javascript or other dynamic scripting. Be sure to first remove any references to the list-style-image property from your style definition. It doesn't work reliably, so we are going another route to get the same effect. Here it is.

Add the following changes to your style definitions;

ul { list-style-type: none; }
ul a { padding-left: 1.5em; background: url('initial_bullet_image.jpg') no-repeat left; }
ul a:hover { background: url('rollover_bullet_image.jpg') no-repeat left; }

Setting list-style-type to none in the ul selector will inhibit any unwanted default bullets from appearing. It is important to set any initial values for the a tags that you will be using in the unordered list as shown in the first a selector in this example. Don't attempt to skip this step and instead set the values of the a tag in a :link pseudo class selector. Failure to initialise the common properties of the a selector as shown here can cause quirky behaviour in IE, for example, if unordered lists are nested. A value should be set for the padding-left property which will shift the list text to the right, otherwise the beginning of your text will appear layered over the background image. A suitable background image should be assigned that will synthesise the list-style-image property. The last line sets the values for the :hover pseudo class, which causes the image roll-over effect1.

Should you feel a pressing need to contact me about this solution, please use the Contact page and write 'Solution to list-style-image problems in IE' at the top of your message.

▲ top

1 The pseudo class rule is commonly misinterpreted. It is not a requirement that you must specify :link and :visited before you specify :hover. Merely that if you wish to specify :link and :visited, it must be done prior to specifying :hover. The rule is poorly worded and perhaps should read: You may specify any of the pseudo classes that are required and omit those that are not, but the style definition must be in this order; :link, :visited, :hover, :active.