Let’s take our standard Terms and Conditions. Normally this is broken down, contract-style, into Section 1 then Sub Section 1.4 etc. Now in HTML we represent this as:
<ol>
<li>Why are HTML Ordered lists rubbish?
<ol>
<li>Bad HTML
<ol>
<li>This could be badly nested HTML</li>
<li>or have other problems such as
<ol>
<li>poorly typed</li>
<li>cake in the keyboard</li>
<li>developer is drunk</li>
</ol>
</li>
<li>or maybe even just tiredness</li>
</ol>
</li>
</ol>
</li>
</ol>

This is nice and proper HTML but the numerals are just single figures rather than being 1.3.2.

CSS 2.1 to the rescue

Thankfully there is a solution (for some browsers) in the form of CSS 2.1. In CSS 2.1, you can define counters. These allow us to store the current level and populate it as we loop through the nested lists. With a bit of jiggery pokery, we can then output the number before the list item.


ol {
counter-reset: item;
}
ol li:before {
content: counters(item, ".") ". ";
counter-increment: item;
}


Now when you render this in Firefox/Safari you get nicely numbered list items.

Drawbacks

There are some drawbacks. It appears that IE (how did we know that was coming?) breaks at the statement. This means that anything appearing after it will not work, so put it at the end of your stylesheet.

Four Corners (aka Top and Tail)

In this method, the background acts as our rounded element, and we place images in elements within the container. In the simplest form, this can be just a top div, bottom div and a bit for your content. The problem with this is that it’s fixed width, which is where the 4 corners comes in allowing the container to resize. This is an acceptable, if HTML heavy way of tackling the problem as you often need more than one image to satisfy the numerous corners. Take a look at these rounded CSS corners.

Four Corners – One Image

This is a more complex CSS fix for the problem, but it’s not so good with transparent images where you need a PNG/transparency. In this instance, fluid rounded corners is a good way of acheiveing the effect and can look quite cool, despite some extra HTML. However, it’s not much use in IE6 as IE’s background positioning is pants so you need to defer to transparent GIFs, which is not much use where you have drop shadows.

Rounded CSS Corners that work in IE as well!

A little while ago I found a link to a site by Drew Diller. Drew had noticed that IE’s VML will allow you to draw a border around an HTML element. This means that you can use your nice CSS 2.1 and get rounded corners in IE. It also makes sure that it only draw the borders in IE, leaving you to implement your own rounded corners in CSS 2.1 compatible browsers such as Firefox and Safari. For instance, you could do the following:

In your CSS you can put the following:

#round {
border: 1px solid #000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

Which will give you a nice rounded box in Firefox and Safari.

You can then use Drew Diller’s script to put them in for IE. Simple!

Drawbacks

Currently, the script doesn’t support HTML form elements (it’s difficult to append HTML to a form element). However, Drew tells me that he’s working on a fix at the moment, which will be greatly received.