Tweaking Your Lists

Posted September 5th, 2008 by Mike Cherim

When I made my How to Build a CSS Web Site tutorial I purposely started with a valid and well-formed, but unstyled HTML page — within the tutorial’s styled page (tricky). I then applied styling gradually, seen as the tutorial runs. The Cascading Style Sheet (CSS) additions are marked on the example text “File” for each page. By the time one gets to page twenty the template is done, hack-free, and the style sheet is complete. I didn’t use universal resets in this build, so I really just whipped a couple of elements into shape with as little styling help as possible. I let the browsers do their thing instead of butting heads with them. During this element whipping I also “tweaked” list types in this template (on page 18). It’s this I want to point out because I think its works well, especially for the minimalist.

The tutorial’s example template, while it is a fixed-width layout, seems to be pretty solid and consistent as it concerns cross-browser, cross-platform consistency. As a disclaimer, I physically tested on Windows and Mac, and the browsers ranged from Internet Explorer (IE) 5, IE 6, IE 7, Firefox 2.x.x to 3.x.x, Safari 3.x, Opera 9.x, and others using these rendering engines. I haven’t tested IE 8 or the new Google browser, though the latter doesn’t worry me.

The Tweaks

I won’t waste time, here’s the CSS for tweaking the lists. This is used for styling lists within a content div, for example. In this case the content div has 20 pixels of left (and right) margin. Paragraphs within the invisibly-bordered div are not styled.

ul {
  padding-left : 40px;
  margin-left : -5px;

dl {
  margin-left : 20px;

dt {
  font-weight : bold;

That’s it. Nothing has to be done with the ordered list (ol). The list items don’t need a thing. I would also apply styles for an ol sub-list, usually specifying lowercase alpha but this is a basic template. I made the dt bold because I really think it should be in most applications.

The benefit to you is that this little bit of CSS used on otherwise unstyled lists seems to line them up and make them neat in relation to one another, across all the browsers and operating systems, the ones I mentioned, anyway. It’s not a lot of styling, but it took me a while to work it out so that it provided consistent results.

Throwing in the Blockquote

Since the tutorial offers a blockquote that stays in line with the lists as well, I figured I might as well provide that, too, in case you want to adopt the basic style.

blockquote {
  margin-left : 20px;
  padding-left : 15px;
  border-left : 2px dotted #COLOR;

Of course you may do something different, but this seems to be a good starting point. Further tweaks to this might include a different border style, etc., simply adjust accordingly. The same applies to the aforementioned lists. You may want your definition (dl) list’s dd to have less left margin, for instance. And more. This is basic styling so it’s intended to get you off to a better start. It’s not the end point, but rather a more solid starting point.

5 Responses to: “Tweaking Your Lists”

  1. David Zemens - 1955 Design responds:
    Posted: September 13th, 2008 at 7:31 pm

    … it’s not like we still don’t love you. :-)

  2. Travis responds:
    Posted: September 15th, 2008 at 5:10 pm

    Slightly off topic, but since i am at your site and playing with it, I thought I would share..

    As you are probably aware, gooogle has a new browser. One of it’s niftiest (if that is a word) features is the ability to right click on any page element and ‘Inspect’ it. The coolest part is that you can then double click on any piece of the code, alter it, and press enter and the changes with be rendered (temporarily) on the site you are viewing! (I’m sure there is probably a firefox plugin that does something similar, but I have never really taken the time to look)

    As a kind of a web hacker (in the good ol’ sense), I found it very helpful in trying to figure out some cross-browser rendering issues I was having.

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.