Home arrow Web Standards arrow Page 3 - Making Lists Using XHTML

Making Lists Using XHTML

As with all facets of web design, there are many ways to do a task and get the same (or similar) results. This chapter presents methods for making lists using XHTML and how the lists will look on a variety of devices, including handhelds. (From the book Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm, from Apress, 2004, ISBN: 1590593812.)

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 20
August 11, 2004
  1. · Making Lists Using XHTML
  2. · Methods B, C and D
  3. · Bullet Lists
  4. · Lists that Navigate
  5. · Mini-tab Shapes

print this article

Making Lists Using XHTML - Bullet Lists
(Page 3 of 5 )

Bite the bullet

“But I hate the way the bullets look on my grocery list, so I should just keep using those <br/> tags.”

No need to revert to old habits—we can continue to use our structured unordered list and let CSS turn off the bullets and indenting (if that sort of thing floats your boat). The key here is to keep our list structured, and then let CSS handle presentation details.

First add a CSS rule that will turn off the bullets:

ul {
list-style: none;

the results of which can be seen in Figure 1-4.


Figure 1-4.  A list with bullets turned off

Now, we’ll turn off indenting. By default, there is a certain amount of padding added to the left side of any unordered list. But don’t worry, we can just chop it off if we’d like:

ul {
list-style: none;
padding-left: 0;

The results are seen in Figure 1-5.


Figure 1-5.  A list with bullets and indenting turned off

While the example in Figure 1-5 looks like we’ve just marked it up with a few <br/> tags, it’s still the same structured, valid, unordered list—ready to be viewed in any browser or device and styled differently with the update of a few CSS rules, if so desired.

Getting fancier with custom bullets

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: 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 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 Cederholm (Apress, 2004, ISBN: 1590593812). Check it out at your favorite bookstore today.

Buy this book now.

blog comments powered by Disqus

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials