IE/Win: font-size and extra vertical space in lists

font-size on hasLayout wrapper, hasLayout a

font-size on list, hasLayout a

font-size on list

font-size on list, hasLayout a, hasLayout li

font-size and hasLayout on list, hasLayout a

font-size on list, hasLayout a, inline li

font-size and line-height on list, hasLayout a

font-size on list, line-height on wrapper, hasLayout a

 

The above problems are, at least in part, related to the following assertion, found in the MSDN online documentation ul Object in MSDN

“The UL element inherits its line-height from the height of the font attribute for the BODY. For example, if the font-size attribute for the BODY is larger than the font-size attribute for the UL element, the list items in the UL are spaced according to the font-size of the BODY.”

The assertion should probably be corrected substituting BODY with “first hasLayout ancestor”, adding the clause: “if the UL has no hasLayout” and specifying that it is true only when the UL has a font-size smaller than the inherited one (as in the mentioned ‘example’)

The following test cases are a simple demonstration. A hasLayout wrapper has font-size:2em and the included list has font-size:0.5em.

The list items appear double spaced, i.e. really taking the line-height from the hasLayout ancestor.

Now the list itself hasLayout, the spacing is correct.

For comparison, the same cases without specified font-size on the list. First with no hasLayout on the list.

Then with hasLayout on the list. There is no difference in spacing from the previous case (no different font-size in effect between wrapper and list.)

Now, reversing the font-size difference: the list has font-size: 2em

The spacing is correct, the list does not seem to inherit any smaller line height from the wrapper.

CSS tests home