list-style-image not working in IE

works fine in Mozilla though...

[thrasher141]

I'm using CSS to design a page with several lists and I want the headings of each list to have a little arrow image, so they are all <li>'s (with a nested list in between each one).

I'm using this rule: li.heading { list-style-image: url("/images/arrow.gif"); }

The heading code: <li class="heading">Name</li> and then a <ul> with entries right after that.

In IE it only displays the arrow image on the headings in the right column. The left and right columns are different divs, but I even tried setting the left column to the same rule as the right column and it still only displayed the arrow on half of the headings. It works fine in Mozilla, however. Dang IE. Any help?

[Birdman]

Hmmm, it may not fix you prob, but you are not supposed to use quotes around the url() in CSS.

li.heading { list-style-image: url(/images/arrow.gif); }

You may need to adjust your left-margin as well. Especially if the left/right divs are floated.

PS: Welcome to Webmaster World!

[thrasher141]

Hmm,
Thanks for your suggestion, Birdman. I took out the quotes but it didn't make a difference. The left and right columns are positioned absolutely, not floated. I'm new to CSS so I'm in the dark here. Don't understand why it works in Mozilla but not IE!

[Birdman]

Ok, I just looked it up and see that the list-style-image property should be set on the list(<ul>) itself, not the list items(<li>).

[w3schools.com...]

Birdman