@DoppleauthorNov 22.2006 — #KDLA, I have tried all of those but to no avail. I can move the bullet further away from the text (or vise-versa) but not closer to it by using a negative value which is odd. I will try the image idea. and get back to you.
Here's how I used the technique on pages like [url="http://www.e-archives.ky.gov/Pubs/AG/Attorney_Gen.htm"]this[/url]. #e-archive-content ul {font-family: verdana, sans-serif; font-size: .85em; font-weight: bold; } #e-archive-content li.htm {font-family: verdana, sans-serif; list-style-image: url(http://kdla.ky.gov/images/misc/globe.gif); } #e-archive-content li {list-style-image: url(http://kdla.ky.gov/images/misc/sheet.gif); margin-top: .75em; padding-left: 5px;} #e-archive-content li ul {font-size: .9em; font-weight: normal; list-style-type: disc;} #e-archive-content li ul li ul {font-size: 1em; list-style-type: square;}
As to background image, it's pretty easy. You place the list-style-type to none, apply the background to the li, and put enough padding on the left for the text to clear the image.
Using a 20x20 px image: <i> </i>ul {margin: 0; padding: 0;} ul li {list-style-type: none; background: #fff url(file.gif) no-repeat top left; padding-left: 25px; line-height:20px; height: 20px; margin: auto 3em; display: block;}
When you're working with inline lists, the background technique is easier to work with, since inline lists do not normally have bullets. The background technique is good, too, because you could apply it to the <a> nested in a <li> (with no margin/padding set), allowing you to create a rollover effect on hover.