[SOLVED] Images in lieu of bullets

Hello all.

I would like to use an image instead of the standard bullet in bulleted lists. After much searching on Google, I have added the following into the CSS box in the settings.

ul { list-style-type: none; }
li
{
font-family: Times New Roman, Georgia, Times, Serif;
font-size: 16px;
font-style: italic;
font-weight: normal;
text-align: left;
margin-top: 4pt;
margin-bottom: 6pt;
line-height: 100%;
color: #990000;
background-image: <img src="http://www.theperdoxrant.com/wp-content/themes/atahualpa332/images/icons/pkbullet1.png" alt="example">;
background-repeat: no-repeat;
background-position: 0 .4em;
color: #000000
}

The default black bullet is gone but my image is not being used. I have checked the image by pasting http://www.theperdoxrant.com/wp-cont.../pkbullet1.png into my browser and the image does come up. So the link is correct.

Questions:

1. What is wrong?

2. Do I always have to use the long version of the url? Is there a short cut I can use?

3. Much to my dismay, I have now discovered that the code above is messing up my sidebar fonts. Yuk. I think the sidebar text must use the same tag <li>.

4. Is there a way I can style my bullets without affecting anything else that I have already styled, such as the contents of the widgets?


Any help would be greatly appreciated.

Thanks in advance.