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.