Images as list bullets

[Benjamin]

On a certain design that I'm putting together, I wanted to use an image for the bullets in unordered lists. Instead of using the list-style-image property, I added the image as a background for each <li> tag, because I heard that it would be easier to control the image's placement that way.

So anyway, the classic story--in Firefox and IE7 it looks great, but in IE6 the first bullet disappears entirely! I consider myself fairly proficient in CSS, so I would assume that this is a bug, but whatever it is I would appreciate any input on how I could make it display each bullet properly.

The page is: http://flairtrophy.com/sandbox/designtest.htm

Thanks a lot!

[ddadmin]

Try something like this. I tested in IE6, and it works.

<style type="text/css">

ul{
list-style-type: none;
padding: 0;
margin-left: 20px;
}

li{
background: url(splat.png) no-repeat top left;
padding-left: 20px;
}

</style>


<ul>
<li>News</li>
<li>Sports</li>
<li>Technology</li>
<li>Webmaster</li>
</ul>

[Benjamin]

Hmm...

Using just the CSS and HTML you gave me, everything works fine, as you said. But in the context of my webpage, all the bullets disappear! Something's goofing up, but I sure don't know what it is.

I may just have to resort to doing it the old-fashioned way if I can't get this to work. However, I would appreciate any input on what may be causing IE to act up in this circumstance. I've put an example of both methods of image bullets on the webpage, so hopefully that will be of help.

Thanks!

[orangedan75]

Have you ever tried to use class tag for the <ul> ? like <ul class="xx"> to distinguish the li with images from li without image?

try this :
<style>
ul
{
list-style-type:circle;
}
.a
{
list-style:url(images/arrow-list.gif);
}
</style>
<ul class="a">
<li class="x">one</li>
<li class="x">two</li>
<li class="x">three</li>
<li class="x">four</li>
</ul>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>

it works for me both in IE and FF.