Summary: An obscure bug in Gecko causes list-item markers to be differently sizeed than the text of the list item, but there is a fix authors can use. Learn how to correctly size list item markers in Gecko 0.9.4, the basis of Netscape 6.2.x and CompuServe 7. Shortly before Mozilla 0.9.4 was finished, a bug was introduced that affects the sizing of list item markers (such as the numbers in an ordered list). While this bug was corrected shortly after 0.9.4 was finished, the bug still affects all Netscape 6.2.x versions, as well as Compuserve 7.0.
The Problem
In affected browsers, list item markers will very often appear to be too big compared to the text in the list item itself. This is most obvious in ordered lists, where the number that precedes each list item may be obviously different than the content that follows it. In fact, the markers were set to be a uniform size that did not change to match the content of the list items, so in rare cases the marker might actually appear to be smaller. See bug 110360, which explains the problem and shows when the fix was applied.
In addition, when a document is displayed in "quirks" mode in Mozilla 0.9.4 and later, the markers of lists will not use the font size of the list item text, but will instead stay the same as the user's default font size. See bug 97351 for more details.
The Solution
Fortunately, there are Mozilla-specific CSS-like rules that can be used to correct both problems. The following rule is derived from Mozilla's html.css file:
*|*:-moz-list-bullet, *|*:-moz-list-number {font-size: 1em;}
This rule tells Gecko-based browsers to use the computed value of font-size for the marker's parent, which is the list item itself. Thus the font sizes of the marker and the content will be the same.
Since this rule is not valid CSS, it will prevent the validation of any stylesheet that contains it. One solution is to move the rule into its own stylesheet, and accept that the stylesheet in question will never validate. This might also be a place to put any Explorer-specific CSS-like rules (such as scrollbar styling rules), which also will not validate.
Authors who are not concerned with making sure the rule applies across all namespaces can use a slightly more simplified rule:
*:-moz-list-bullet, *:-moz-list-number {font-size: 1em;}
Recommendations
- If it is important to make list item markers match the font size of the content, use one of the suggested rules.
- In situations where validation is a priority, segregate the rule into a separate stylesheet so that the rule will not confuse CSS validators run against the main stylesheet.
Related Links
Original Document Information
- Author(s): Eric A. Meyer, Netscape Communications
- Last Updated Date: Published 04 Oct 2002; Revised 07 Mar 2003
- Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
- Note: This reprinted article was originally part of the DevEdge site.