Set space between list item and bullet (HTML, CSS)…

Problem

I’ve just had to convert a Photoshop visual to a WordPress template. The designer wanted a bulleted list where the bullets themselves were very close to the list items, and were small dashes. Cross browser support for list item and bullet styling is ropey at best, and to make things perfect I’d have to resort to browser specific styles.

Solution

The solution I think I’ll be using for the rest of my ‘web’ career will be this. JUST FORGET THE BULLET ITEM, and use positioned background images instead.

In the stylesheet, add styles for both the ‘ul’ tag, and the ‘li’ tag like so (explanations inline):

ul {
margin-left:0px; /* Set the indenting back to far left. */
padding-left:0px; /* Set the indenting back to far left. */
}
 
ul li {
list-style-type:none; /* Switch the list bullet off altogether. */
background-image:url(dashbullet.gif); /* The replacement bullet image */
background-position:0px 4px; /* Place bullet 0px from left and 4px from top */
background-repeat:no-repeat; /* Stops bullet tiling, important */
padding-left:7px; /* separation from li txt and bullet */
}

Then just create the list as you usually would, with ‘ul’ and ‘li’ tags. Here’s what it looks like in use:

Here’s a bit more detail so you can get your head around the spacing. It’s incredibly simple, but still, nice to have a diagram or two sometimes:

This style works perfectly (by my testing, but I’m not perfect) on:

• Internet Explorer 6, 7 & 8+
• Firefox 2.*+
• Opera 9+ (not tested 8, but bet it works!
• Google Chrome (all versions)
• Safari (Mac and PC versions)