IE7-/Win — Extra vertical space in Lists

In all the following test cases a list (ol, blue background, black border) contains some list items (li, red background) each containing a block link (a display:block, gray background, green on hover.) Depending on several factors IE7-/Win add extra vertical space.

The ‘big’ extra space (B, about the height of a line), case 1, occurs only in IE6-, it has been fixed in IE7. Not so the ‘small’ ones which depend on line-height and vertical-align and occur in various combinations. Only in IE8 the problem is fully fixed.

Description of the test cases:

  1. white space between lis (sY)
  2. as have hasLayout (sY aL)
  3. lis have hasLayout (sY lL)
  4. lis and list have hasLayout (sY lL LL)
  5. lis and as have hasLayout (sY aL lL)
  6. further white space inside lis, after the content, before </a> (s2)
  7. NO white space, neither between nor inside lis
  8. NO white space; as have hasLayout (aL)
  9. NO white space; lis, as, list have hasLayout (aL lL LL)
  10. NO white space; as are relative (aR)
  11. as have hasLayout, lis are inline (sY aL lI)
  12. lis have hasLayout and vertical-align:top (sY lL vV)
  13. NO white space; list, lis, as have hasLayout, lis have vertical-align:top (aL lL LL vV)

1: no hasLayout, white space

  1. Lorem
  2. Dolor sit amet, consectetuer adipiscing elit maecenas nunc nulla
  3. Lorem ipsum

2: as have hasLayout

  1. Lorem
  2. Dolor sit amet, consectetuer adipiscing elit maecenas nunc nulla
  3. Lorem ipsum

3: lis have hasLayout

  1. Lorem
  2. Dolor sit amet, consectetuer adipiscing elit maecenas nunc nulla
  3. Lorem ipsum

4: lis and list have hasLayout

  1. Lorem
  2. Dolor sit amet, consectetuer adipiscing elit maecenas nunc nulla
  3. Lorem ipsum

5: lis and as have hasLayout

  1. Lorem
  2. Dolor sit amet, consectetuer adipiscing elit maecenas nunc nulla
  3. Lorem ipsum

6: blanks inside lis (after content, before </a>)

  1. Uno
  2. Due Due Due Due Due Due Due Due Due Due Due Due Due Due Due Due
  3. Tre Tre Tre

7: NO white space (neither between nor inside lis)

  1. Lorem
  2. Dolor sit amet, consectetuer adipiscing elit maecenas nunc nulla
  3. Lorem ipsum

8: NO white space; as have hasLayout

  1. Lorem
  2. Dolor sit amet, consectetuer adipiscing elit maecenas nunc nulla
  3. Lorem ipsum

9: NO white space; lis, as, list have hasLayout

  1. Lorem
  2. Dolor sit amet, consectetuer adipiscing elit maecenas nunc nulla
  3. Lorem ipsum

10: NO white space; as are relative

  1. Lorem
  2. Dolor sit amet, consectetuer adipiscing elit maecenas nunc nulla
  3. Lorem ipsum

11: as have hasLayout, lis are inline

  1. Lorem
  2. Dolor sit amet, consectetuer adipiscing elit maecenas nunc nulla
  3. Lorem ipsum

12: lis have hasLayout and vertical-align:top

  1. Lorem
  2. Dolor sit amet, consectetuer adipiscing elit maecenas nunc nulla
  3. Lorem ipsum

13: NO white space; list, lis, as have hasLayout, lis, as have vertical-align:top

  1. Lorem
  2. Dolor sit amet, consectetuer adipiscing elit maecenas nunc nulla
  3. Lorem ipsum

Comments

Of course the above cases do not exhaust all possible combinations, however they show that hasLayout on the various elements usually creates extra vertical space (and further problems, especially on the list markers: lists, hasLayout and disappearing list markers, problems with lists and hasLayout.) A single fix for the extra space working in all cases does not seem to exist. Simplifying a bit three types of extra space can be distinguished:

Results

eXtra vertical space: B ~ 1em, S = small, s = small, only with small line-heights, - = no) [IE7 never has B space]
Hover (T = on text, - = full width) [IE7 always full width]
Markers (N = broken, - = ok)

  s a l v L X H M h
1 Y - - - - B T -
2 Y L - - - s - -
3 Y - L - - S T N
4 Y - L - L S T N
5 Y L L - - s - N
6 2 - - - - - T -
7 - - - - - - T -
8 - L - - - s - -
9 - L L - L s - N
10 - R - - - - ~ -
11 Y L I - - - - N
12 Y - L V - s T N
13 - L L V L s - N

Further notes:

This same page, with line-height: small (1), big (2), or with: unordered lists. To test other combinations use the form below.

list type:


 

CSS tests home