1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

IE List-style image not clearing

Problem

Globally defined list-style-image shows up in IE where a specific list is given list-style:none.

Solution

Recommended Solution: Add list-style-image:none; to the specific selector.

Detailed description

IE List-style image does not clear

Every browser except IE will clear a defined list style image when the specific list is given list-style:none;
Internet Explorer, Including IE8, will show the list bullet image anyway - unless you specifically clear it using list-style-image: none;

Why you care:

You want all lists in a page except the menu (for example) to use a custom bullet image but the image insists on showing up even in the lists you told it not to.
See the attached gif screenshots (below) for 2 examples of what you want (and actually get in most browsers) verses what you get in IE.

Example

(Generally, this becomes a point of confusion when you are using css shorthand, but for clarity, I will give a long-hand examples first.)

This will clear the list bullet image in most browsers, but not IE:

  <style type="text/css">
ul li {
   list-style: square;
   list-style-image: url(li.png);
}

ul.menu li {
   list-style: none;
}
  </style>

This works cross-browser:

  <style type="text/css">
ul li {
   list-style: square;
   list-style-image: url(li.png);
}

ul.menu li {
   list-style: none;
}
  </style>

Shorthand Examples

This will clear the list bullet image in most browsers, but not in IE:

ul li {
list-style: square outside url(li.png);
}

ul.menu li {
list-style: none outside none;
}

This works cross-browser:

ul li {
list-style: square outside url(li.png);
}

ul.menu li {
list-style: none outside none;
}

Note:
Not tested on IE browsers prior to IE6.

want.gif
get.gif
want-simplified.gif
get-simplified.gif

Text ID: IELISTSTYLEIMAGE

---