One thing we do with lists on a website is to put a small image to replace the default bullet with something that looks nice in the theme.

If you are still reading the documentation on how to place an image in a list to replace the default bullet and what you read is some talks about list-style-image then you are in the wrong direction. Of course, this works great with Mozilla. But Internet Explorer does not understand the concept of list-style-image at all.

To fix the problem in both types of browsers, one uses the background CSS keyword instead.

Another difference is that you will end up using a padding instead of a margin. When using the proper list style image, the style adds its image in your maring. When using a background, the image will be within you box and thus you want to use a padding to push the text to the right.

The solution is something like this:

	list-style-type: none;
	list-style-image: none;
	background: transparent url(images/test.html) no-repeat 0px 3px;
	padding: 20px;
	margin: 0px;

The positions, padding and margin values will vary depending on the size of your font and bullet point image. If the size of your font can vary, you may want to use em instead of px. (1em = body font size)