CSS, JavaScript and XHTML Explained

Using images as Bullets in XHTML Lists October 3, 2007

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:

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;
}

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.