Using images as Bullets in XHTML Lists

Creating lists with Images as Bullets using CSS

All CSS compliant browsers and IE support images as a list style type. Most designers actually prefer to use images instead of default bullet support because there is more control and more consistency in appearance across different browsers.

While the general idea should be very simple, a simple declaration such as ul {list-style-image:url(../images/bullet.gif);} will only work cross browser if you use a 10px by 10px bullet with small font. The issue is that Firefox vertically aligns the bullet to text bottom and Internet Explorer (at least IE6, IE7 and IE5.5 on Windows), vertically aligns the bullet to text top, so if the user changes their font size, or if your image is not the same height as your text, the bullet will look off.

The solution is to remove the bullet with list-style-type: none; and include a positioned background image instead:

Single Line List Items

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
li {
	background-image:url(bullet.jpg);
	background-position:0 50%;
	background-repeat:no-repeat;
	padding:0 0 0 25px;
}

Multiple Line List Items

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
li {
	background-image:url(bullet.jpg);
	background-position:0 0.3em;
	background-repeat:no-repeat;
	padding:0 0 0 25px;
}

Explaining the code

  • We first remove the default bullets with list-style-type: none;. Bullets for list items are defined by the ul. Background images, however, are defined in the li.
  • Set the margin and padding to zero. This is important as browsers differ on whether they use padding or margin for the left indentation. Resetting both to zero would not have been necessary if you started off with the CSS reset as described in CSS Best Practices
  • Feel free to add a margin back onto the UL with margin-left: 0.5em or some other width that makes sense to you. This margin in on the UL and not the LI, so will not impact the placement of your bullets, but rather moves the whole block of list items over to the right.
  • Declare a background image to be used. A no-repeat is important.
    • For one line list items, such as navigation, this is a great spot to use a sprite and change background position for a hover effect.
    • For list items with chances of more than one line of content: don’t use a sprite unless it’s the bottom right hand corner of the sprite that is being used for the bullet.
  • Declare a background position
    • For one line list items, such as navigation, declare the background position as 0 50%. The line background-position:0 50%; means 0% from the left and 50% from the top. Unlike border, margin, etc. shorthand which is top/bottom left/right when 2 values are present, background is left top.
      A background position of 50% will vertically center the background image against the entire li as using percentages with backgrounds means place the xx% point in the image xx% from the top of the container.
    • For list items with chances of more than one line of content use ems instead of % to place the image. The placement will depend on your bullet image size, but generally line background-position:0 0.3em; will be approximately correct (tweak from there).  This will place your image correctly cross browser behind the first line on the left, and will be pushed down a bit or up a bit if the user resizes their text.
  • Give the list item some left padding so that it allows the image to hang off the left hand side of the text and appear like a bullet. Since the bullet is an image, which is sized in pixels, define the left padding in px units rather than em.

See: Using ASCII and UNICODE characters as Bullets with CSS.

This entry was posted in Web Development. Bookmark the permalink.

8 Responses to Using images as Bullets in XHTML Lists

  1. Nice write up, I use this technique on my “Elsewhere” list on my homepage. I was going to write about this after a friend of mine asked how to do it, but now I’ll point them here 🙂

  2. matt says:

    you save my life. Thank you I been meaning to find the solution to the multiple list problem for a long time now.

  3. aljuk says:

    What an amazing development resource this blog is. You’re well and truly rss’d and I’m going to try my darndest to read your every word…

    10/10!

  4. Chaz says:

    This blog is an amazing resource, indeed. I do wish to point out a few things, tho. The print is not easy to read, particularly black print on the purple, as in the error message I got when I tried to go to the link “Using ASCII and UNICODE characters as Bullets with CSS.”

    The dates on the posts are impossible for me to read, as well. If you could provide more contrast, I for one would find it much easier to use this great resource.

    That said, thank you for providing all the info you’ve put into this site.

  5. estellevw says:

    THanks for all the nice comments. And, Chaz, thanks for the feedback. I’ve gotten rid of the rounded corners to provide more space for text and bumped up the font size site-wide. I am working with a weird pallette, so didn’t change the color of the date, but it’s 2 font sizes bigger now, so hopefully legible.

  6. Karl says:

    Thanks, code works well, cut and paste!

  7. rafs says:

    i have been suffering with an accordeon jquery menu which didnt allow me to change bullets… i tried other tutorials on the background as a solution as well but none of them had the multiple line list explanation. you saved my life, THANK YOU SO MUCH!!!

Leave a Reply

Your email address will not be published. Required fields are marked *