First time visitor? The tutorials start here.

Creating Lists in xHTML and styling them with CSS

In part 2 of CSS for layout, I had you add a list of links to your practice page. This tutorial will cover how to make a list in xHTML, as well as how to style it with CSS.

Here is that list:

<ul>
   <li id="first"><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Community</a></li>
   <li id="last"><a href="#">Contact</a></li>
</ul>

<ul> stands for “unordered list.” If you want your list to be numbered, you would use <ol> for “ordered list” instead:

<ol>
   <li id="first"><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Community</a></li>
   <li id="last"><a href="#">Contact</a></li>
</ol>

By default, both ordered lists and unordered lists will have a top and bottom margin in all browsers, much like a paragraph. However, the default left margin and default left padding are both different in Internet Explorer than they are in all other browsers, as are the default top and bottom margins, so it’s always a good idea to define these things to be exactly as you want them to appear in all browsers.

The following graphics demonstrate the different default behaviors between Internet Explorer and all other browsers.

1.png

This first graphic shows an ordered list and an unordered list inside a containing div, putting nothing but the two lists inside that div. The only thing I added for styling is a border around the <ul> and <ol> tag to show its margins.

Firefox IE
<ul> and <ol> Margins A nice 1em top and bottom margin.


No side margins.
No top margin if the list is the first thing inside a <div>. Otherwise, a 1.5em top and bottom margin.


No right margin, but the left margin is moved inward, with the numbers and bullets for each list item being outside the list area.

 

Removing the left margin with the following CSS:

ul, ol { margin-left: 0; }

We now have this:

2.png

Firefox IE
<ul> and <ol> Margins No change, because the bullets and numbers were already inside the list area, not outside in the margin beside it. (See: CSS margin and padding attributes if you need clarification on this) The bullets and numbers have disappeared, because removing the left margin gave them no place to go.

 

Now let’s remove that left padding from the lists:

ul, ol { margin-left: 0; padding-left: 0; }

3.png

Firefox IE
<ul> and <ol> Margins The left padding was making room for the bullets and numbers before, but now they’ve been pushed outside the list area. No change, since the bullets and numbers were in the margin which we removed earlier, not in the padding.

Since removing the margin put the bullets and numbers outside the list area in Internet Explorer (making them disappear), and removing the padding put them outside the list area in Firefox (making them appear outside the list area), what happens if we do this:

ul, ol { margin-left: 0; padding-left: 0; list-style-position: inside; }

4.png

As you can see by doing that, the default behavior of lists, no matter what the browser is, is list-style-position: outside;, which was overridden by defining it as inside.

Now that left side is looking a bit tidier and more consistent from browser to browser, but… What if one or more of those list items has multiple lines?

5.png

That might be fine and dandy if you use some other means to separate each list item, such as alternating background colors, a border between each of them, an extra gap between them, etc. But what if you want those bullets and numbers to stand out and do it consistently in all browsers?

Let’s take that list-style-position definition back out of the CSS, keeping the padding-left and margin-left both defined as “0,” and concentrate on the List Items within those lists…

List Items

<li> stands for “list item,” and they are used in both ordered lists and unordered lists. By default, they have no margin or padding on the top, right, or left, but the margin and padding on the left are different in Internet Explorer than they are in all other browsers.

Here is the xHTML for that list again:

<ul>
   <li id="first"><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Community</a></li>
   <li id="last"><a href="#">Contact</a></li>
</ul>

And the CSS we’re reverting to:

ul, ol { margin-left: 0; padding-left: 0; }

Result:

3.png

Now let’s add a left margin to the list items, along with a gray background color so you can see where the margins (the white area that’s left) of those list items are:

li { margin-left: 2em; background: #eee; }

Result:

6.png

This is fine if you have 9 or fewer list items in your Ordered List, and an even smaller left margin (say, 1.5em) is fine in Unordered Lists, but what if you have 10 or more items in an Ordered List?

7.png

The only way to be sure is to check it in multiple browsers, and increase that margin-left as needed.

Top and bottom margins

Now that we’ve got the left side working fairly consistently in multiple browsers, what about those top and bottom margins? Luckily, those are easy enough to define.

Instead of:

ul, ol { border: 1px solid #999; margin-left: 0; padding-left: 0; }

Use this:

ul, ol { border: 1px solid #999; margin: 1em 0; padding-left: 0; }

The first measurement (in this case, 1em) takes care of top and bottom margins, while the 2nd measurement (0) takes care of left and right. Now it looks the same in Firefox as it did before since those measurements are the default in web-standards-compliant browsers, but the margins in IE now look the same as they do in all others.

If your practice files aren’t already open, open practice1.htm in both Firefox and IE, and style.css in Crimson Editor. Now add the following to the end of style.css:

ul, ol { border: 1px solid #999; margin: 1em 0; padding-left: 0; }
li { margin-left: 2.75em; background: #eee; }

Now save your changes.

While we’re at it, let’s also add an Ordered List to that sidebar. Open practice1.htm in Crimson Editor, then add this below your existing list:

<ol>
   <li id="first"><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Community</a></li>
   <li id="last"><a href="#">Contact</a></li>
</ol>

Save your changes, then refresh both browsers and take a look at how different that first list in the right sidebar looks from the way it did before.

Don’t like the bullets and numbers? Keep reading for more on styling lists…

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.