First time visitor? The tutorials start here.

More on Styling Lists

In the previous page of these tutorials, you learned how to account for browser differences when styling lists. Soon, you’ll be able to get more creative when styling lists.

For this, you’ll need practice1.htm open in both Firefox and Internet Explorer, and style.css open in Crimson Editor.

list-style-type for Unordered Lists

The default for this with Unordered Lists is disc. Others you may want to use for an Unordered List are square or circle.

Example:

ul { list-style-type: square; }

Go ahead and try that in your CSS and then view it in the two different browsers. After that, change square to circle and see how that looks.

You could actually apply those attributes to an Ordered List as well, but that would defeat the purpose of having them “ordered.”

list-style-type for Ordered Lists

The default for list-style-type for Ordered Lists is decimal.

Others you may use are:

decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
lower-greek The marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
hebrew The marker is traditional Hebrew numbering
armenian The marker is traditional Armenian numbering
georgian The marker is traditional Georgian numbering (an, ban, gan, etc.)
cjk-ideographic The marker is plain ideographic numbers
hiragana The marker is: a, i, u, e, o, ka, ki, etc.
katakana The marker is: A, I, U, E, O, KA, KI, etc.
hiragana-iroha The marker is: i, ro, ha, ni, ho, he, to, etc.
katakana-iroha The marker is: I, RO, HA, NI, HO, HE, TO, etc.

I took that straight from w3schools‘s website, because there’s no way I could remember all of those off the top of my head. 😛

Go ahead and try this in your CSS and see how it looks in both browsers:

ol { list-style-type: lower-greek; }

Ah, it works in Firefox, but not in Internet Explorer. Darn, that IE sure does have its shortcomings, doesn’t it? 😉 As you can see, some list-style-types are safer than others to use, so you might want to stick with these:

  • decimal
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha

Now those I can remember off the top of my head. 😉

You may also use those in Unordered Lists, but that would defeat the purpose of using an Unordered List.

Bye Bye Bullets

Now let’s get rid of the bullets in the Unordered List completely:

ul { list-style: none; }

Change whatever you currently have for list-style-type to that in your CSS, check it out in your browsers, and see what you think. You can also do that with Ordered Lists, but that would defeat the purpose of using an Ordered List.

Now where you have this:

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

Change li so that you’re only targeting the List Items that are inside an Ordered List. To do that, you simply add ol and a space before the li, to mean “any <li> inside an <ul>.”

Now you should have this instead of the above:

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

On a side note, notice the comma with “ul, ol” in the first line, but there’s no comma with “ol li” in the 2nd line. That’s because ul and ol are two separate things, therefore they are separated by a comma, whereas ol in the second line of code is describing which li tags need to be targeted. In other words, it’s saying, “Go inside the <ol> tags, find the <li> tags that are in there, and style them like this, leaving all other <li> tags alone.” If you were confused about that, I hope it makes more sense now.

More on floats

Heh, had you fooled. Did you notice how there are no left borders on the lists when the borders should be completely surrounding them? That’s because those borders extend all the way across the page, and it’s actually the right margin in the content area that’s keeping that list in place. To demonstrate, remove the bold part in the following CSS, save your changes, then refresh both browsers:

#content {
	background: #fff;
	padding: 1px 0;
	float: left;
	width: 700px;
	margin-right: 2em; 
}

This is because the “content” div is floated to the left. If the “content” div contained less content and the sidebar were to extend past it, the sidebar content would actually wrap around the content div. That is, once it past the bottom of the content div, the next line would continue beneath it. Since divs can only be square or rectangular, the left margin of that #links div extends all the way to the left of its parent element, which we gave the id of “container”.

To fix this problem that’s caused by the float, we need to also float #links to the right. To make it fill out the available space there, we also need to set a width to it. Since the #container is 900px wide, #content is 700px wide, and neither of those two divs have borders or padding applied to them, 200px should make #links fit neatly on the right.

Let’s put this new line of CSS before #links-br so we can keep all the #links stuff together:

#links { float: right; width: 200px; }
#links-br { clear: both; }

Now find the following CSS and remove it. The new 200px width will serve the same purpose, but if you leave them both there, it will push your sidebar down below your content.

#links {
	margin-left: 700px;
}

We also need to remove the right margin from #content by removing the bolded line below:

#content {
	background: #fff;
	padding: 1px 0;
	float: left;
	width: 700px;
	margin-right: 2em; 
}

There, that’s more like it. Now the Unordered List is exactly how we want it at this point.

Now add the following to your CSS, save changes, refresh your browsers, and hover on the links.

ul li a { 
	display: block;
	border-left: 10px solid #ccc;
	padding: 0 0.25em;
	text-decoration: none;
}
ul li a:hover {
	border-color: #f00;
	background: #f3f3f3;
}

In this next tutorial, I’ll explain how that works and introduce you to CSS link hover effects, aka image rollovers. No need for javascript here! 😀

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.