CSS Tuesday: Images as List Bullets

CSS HOWTOs Web Development

There are plenty of ways to spruce up the boring bullets used in HTML lists.

The best way and most browser compatible way I have found to do this is using the following code:

ul li {background: url('images/dot.gif') no-repeat 0 3px; list-style:none;margin:0 0 2px 0;padding:0 0 0 10px;}

You can see that here:

  • Example of fancy bullet
  • Another bullet point

Vs. The plain list:

  • Example of fancy bullet
  • Another bullet point

Something like this may seem simple, but it is often overlooked and can really dress up a site.

Leave a Reply

Your email address will not be published.
*
*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

From Twitter

Twitter Weekly Updates for 2009-08-22

Mondays: Conference call, conference call, meeting, call about a meeting, conference call 😉 # Sometimes it is best to do the exact opposite of what clients want – because that is exactly what they want! # Ahh, remember the days when having 100 items in your trash (computer) was a lot? I just trashed over […]

From Twitter

Twitter Weekly Updates for 2009-08-15

Man – a long day followed by what will most likely be a long night… # Some days are hard and long, but at the end of those days it is nice to know you got a lot accomplished. # @1tb Check out http://probonobaker.typepad.com/probonobaker/ (one of my old co-worker's site) incase you are still hungry […]