HTML and CSS Reference
In-Depth Information
Custom Bullets with Background Images
You are not limited to using only the characters and symbols we've discussed, which is a good
thing, because unlike with text, you have little control over the presentation of the bullet
beyond the shape. What if you want a bigger bullet or one that is in a different color from the
text it sits next to? To do this, you can specify a custom symbol using the
list-style-image
property:
li {
list-style-image:url(bullet.gif);
}
Figure 12-8 shows the effect of applying a bullet image (literally—ah, the irony of it) in this
way, but it's not exactly a perfect solution.
Figure 12-8.
Custom bullet point image—a bullet, no less!
The screen shot was taken on IE 6 for Windows. In Firefox the bullets lined up perfectly, so
getting the image lined up properly in IE (perhaps by adding space directly to the image itself )
would then cause it to go out of line in other browsers. So, although a property exists that's
designed specifically for using custom bullet images, we recommend a different approach:
hide the default bullet symbol and instead place
as a background image
the image you want to
use as a bullet. By doing this, you gain greater control over placement. The visual effect is
improved and you're not affecting the underlying markup in any way—you're still dealing with
a list. Because you're no longer simply swapping the browser's default bullet image with
a similar-sized replacement, you'll need to change some other CSS properties, namely the
padding on the left of the list item (otherwise, the text will sit directly over the background
image). You'll also probably need to tinker with the default indenting of the list items. Here's
some CSS that achieves this aim:
ul, li {
padding:0;
margin:0;
}
ul#list2 li {
list-style:none;
background: url(bullet.gif) no-repeat left center;
padding-left:20px;
}
The visual effect is much the same—actually, make that better in IE's case. A glance at
Figure 12-9 shows that the alignment issues have been sorted out quite nicely by using the
background-image approach.
