Working with my wife's blog skin, she has the the menu on the right-hand side and wants to use a custom image, , for the bulleted lists.  Instead of using a two column table and placing the image in the first cell we opted to do it all in the stylesheet.

First I tried setting the < li >background to the image with a no-repeat option.  That gave us the image behind the first letter of the list...next I set the list-type-image to the image and that worked!  We're in business?  Not really.  The image would show up as expected as long as it was viewable in the browser window.  When the image scrolled off of the screen, then back up, the image would disappear.  You had to highlight the area to get the images to show back up.  This was happening in Maxthon and Slimbrowser..don't use Firefox so I couldn't try it there.

Finally, I did some googling and the first result gave me what I needed.  From message #4 by "createErrorMsg".

• The problem is the (absent) list-style-position property.
• The default value for a < li > is outside...when you nullify the padding in the css, you remove the space in which the bullet sits.
• Set list-style-position to inside, which causes the bullet to render within the content space of the list item.

After making the change it worked!  Woohoo!  I had to go into the lists to add a space before the text because I don't like the bullet image right next to the text but that's a small change.