Question

I have made a website that uses unordered lists. These lists use an image (ticks on some ul’s, crosses on the others) that use the list-style-image attribute in CSS. It works fine in all the browsers, except for IE7.

When the page is viewed in IE7 the lists are displayed as they should be, but it doesn’t display the image, which is strange as all the other browsers (IE8, IE9, Chrome, Firefox, even Safari) pick it up and display it.

Here’s the CSS:

#carousel ul.benefits {
float: right;
width: 573px;
margin-right: 18px;
margin: 0px;
margin-top: 10px;
padding: 0px;
padding-left: 30px;
}

#carousel ul.benefits li {
font-family: "OpenSansRegular",Tahoma,sans-serif;
font-size: 1.8em;
font-weight: normal;
color: #bdbdbd;
list-style-image:url('images/white-tick.png');
float: left;
width: 100%;
}

The HTML:

<ul class="benefits">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

It’s a strange issue and one I’ve never come across before.

Answer 1

There is a known bug in IE7 regarding this. A floated list-item will not display any list marker image.

You could probably achieve the same thing using a background image and some padding, though.

Update

Here is a sitepoint reference link : http://reference.sitepoint.com/css/list-style-image#compatibilitysection