Taming the "Taming lists" model
Russ Weakley
05-Sep-03
"Taming lists" width problems
To be semantically correct, navigation links on a page should be rendered as list items. There has been many articles written about why and how to achieve this. Perhaps the most well-known of these is Mark Newhouses "Taming Lists" article.
I have been using modified versions of this system on many of my sites. On some sites I have noticed that Win/IE renders the list wider than other browsers. The problem was obviously caused by IE's handling of the box model, but why was it inconsistent? I decided to try and track down the problem.
After some experiments, I found that the problem was caused by the rendering mode. The chart below shows that the "Taming list" model works correctly in all browsers if Quirks mode is used, but appears wider that it should in Win/IE if Standards-Compliant mode is used.
| File | Doctype | Mode | Width |
|---|---|---|---|
| Test 02 | HTML 4.01 | Standards-Compliant | Wider Win/IE |
| Test 03 | HTML 4.01 | Quirks | OK |
| Test 04 | XHTML1 | Standards-Compliant | Wider Win/IE |
| Test 05 | XHTML1 | Quirks | OK |
So, there were a number of choices.
- Use the model and set the doctype to Quirks mode
- Use a box model hack to get around the problem
- Try to modify the system so that it worked in both Standards-Compliant and quirks modes, without resorting to hacks.
Modifying the "Taming lists" model
I played with the code and came up with a modified list that worked in both modes without hacks. The problem is caused by the following CSS rule: html>body #button li a { width: auto; }.
If this rule is removed or modified, most modern browsers, including Win/IE, will render the list to the correct width. However, in Win/IE the list items only become active when the mouse is over the text area.
| File | Doctype | Mode | Width |
|---|---|---|---|
| Test 06 | XHTML1 | Standards-Compliant | OK |
| Test 07 | XHTML1 | Quirks | OK |
| Test 08 | HTML 4.01 | Standards-Compliant | OK |
| Test 09 | HTML 4.01 | Quirks | OK |
A new list model for Standards-Compliant mode
I then decided to make an entirely different list model that would work in Standards-Compliant mode.
Using my new version on page in Quirks mode, both Win/IE and Mac/IE will render a narrower list due to their misinterpretation of the box model.
However, if Standards-Compliant mode is used, all browsers except Win/IE5 will render the list to the correct width. Win/IE5 still renders a narrower list because regardless of the mode used, it will still misinterprets the box model.
| File | Doctype | Mode | Width |
|---|---|---|---|
| Test 13 | HTML 4.01 | Quirks | Narrow |
| Test 12 | HTML 4.01 | Standards-Compliant | OK |
Conclusion
Without hacks, the "Taming Lists" model only works correctly in Win/IE if the page is coded in Quirks mode, and my new model only works correctly in Win/IE if the page is coded in Standards-Compliant mode. This leaves us with three choices:
- Use the "Taming list" model in Quirks mode
- Use my new model in Standards-Compliant mode.
- Use a box-model hack on either of the list models to make them work in either mode.
Adding subsections to the "Taming lists" model
Finally, I decided to modify both list models so that sub-navigation items could be added.
There are two options below. A model that works in Quirks mode and a model that works in Standards-Compliant mode. They can be styled in a wide range of ways to suit your needs.
| File | Doctype | Mode | Width |
|---|---|---|---|
| Test 10 - Quirks version | HTML 4.01 | Quirks | OK |
| Test 11 - SC version | HTML 4.01 | Standards-Compliant | OK |
