Customizing Unordered Lists

I occasionally see people on lists and forums asking how they can customize bulleted lists. This is about all you need to know:

.disc {list-style:disc}

  • this is
  • a disc

.square{list-style:square}

  • this is
  • a square

.circle {list-style:circle}

  • this is
  • a circle

.image {list-style-image:url(http://www.markme.com/cantrell/images/mm_bullet.gif)}

  • these are
  • custom bullets

5 Responses to Customizing Unordered Lists

  1. E says:
    October 23, 2003 at 3:22 pm

    list-style-image places the image differently on different browsers. It’s better to use non-repeating background image:li {list-style: none;background: url(img.gif) no-repeat left center;}

  3. Bryan F. Hogan says:
    October 23, 2003 at 4:56 pm

    And don’t forget the type attribute of the tag itself.Disco Duck

  5. Gregory Cerveny says:
    October 27, 2003 at 1:29 pm

    Where are my posters?-Greg