HOWTO: Replace bullets with custom graphics?

anybody know how to replace bullets <ul> with custom graphics. Also how do i make padding and alignment?

should i use css?

 

Something like this in your stylesheet will sort it:

ul {
list-style-type: none;
}

li {
background: url(your-image.gif) left center no-repeat;
padding-left: 15px;
margin-bottom: 10px;
} 

Code (markup):

 

thanks mate +rep added
i actually tried that in my css, and its not working. What could be the problem?

 

got a link... PM it to me if you dont want it public and i'll take a look.

 

The problem is you're not linking anybody to your markup.

 

Here is my css code. I have never used much of the code, just a single line. But this should work isnt it. I have not defined <li>

 

The book i read does it just like webdesigner said. It uses background images. Maybe there is a good reason why it didn't suggest using list-style-image.

 

I picked up the solution from Web Standards Solutions, which was written 3 before CSS Mastery. The reason is because list-style-image is inconsistent (spacing and such) across browsers, and background is very consistent.