Beast-Blog.com
Tweaking Your Lists

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.

Filed under Coding & Markup, Do It CSS Style —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

The Best of the Beast in 2008 »

Are Lists Becoming the New Tables? »

Using HTML Lists Properly »