Images as list bullets

[Benjamin]

On a certain design (http://flairtrophy.com/sandbox/designtest.htm) 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! :D

[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 (http://flairtrophy.com/sandbox/designtest.htm), 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.