Get Down With Markup - Getting fancier with custom bullets
(Page 7 of 9 )
Perhaps you would like bullets for your list, but instead using your own bullet image, rather than letting the browser use its boring defaults. There are two ways to do this—the second of which I prefer due to its more consistent results across various browsers.
The first option would be to use the list-style-image property to assign an image to use in place of the default bullet.
ul {
list-style-image: url(fancybullet.gif);
}
This is the simplest method; however, it renders somewhat inconsistent results in some browsers in respect to the vertical positioning of the image. Some browsers will line it up directly in the middle of list item text; others may position it slightly higher. It’s a bit inconsistent.
To get around the vertical placement issue that list-style-image reveals on a few popular browsers, I like to use an alternate method, which is to set the image as a background for each <li> element.
First we’ll turn off the default bulleting, and then add our own background image:
ul {
list-style: none;
}
li {
background-image: url(fancybullet.gif) no-repeat 0 50%;
padding-left: 17px;
}
no-repeat tells the browser not to tile the image (which it does by default), while the 0 50% tells the browser to place the background-image 0 pixels from the left and 50 percent down from the top, essentially vertically centering the fancybullet.gif. We could have also used exact pixel locations from left and top the same way. 0 6px would have placed the bullet 0 pixels from the left and 6 pixels from the top.
We also add 17 pixels of padding to the left of the list item so that our 15-pixel-wide by 5-pixel-high image will show through completely, and with a little whitespace, without any overlapping of the text. This value would be adjusted depending on the width of the bullet image you were using (see Figure 1-6).
Figure 1-6. A list with custom bullets
 This chapter is from Web Standards Solutions: The Markup and Style Handbook by Dan Cederhold (Apress, 2004, ISBN: 1590593812). Check it out at your favorite bookstore today. Buy this book now.
|
Next: Lists that navigate >>
More Web Standards Articles
More By Apress Publishing
