IE7-/Win bugs with lists (<ul>, <ol>) and hasLayout

In all the following test cases a <div> (blue border) contains a list (<ul> or <ol>, red border) with 3 <li>s (green border.) Most of the ul, ol, li properties are left at their default values. Many problems show up when hasLayout is given to the different elements (in all IE7-/Win version, but with different behaviors.) They include but are not limited to:

  1. disappearing list markers
  2. wrongly positioned list markers, for example at the bottom of a <li> taking more then one line, or not inside/outside as specified
  3. numerical markers no more "counting"
  4. changing of the area where the onmouseover event on <li> is triggered
  5. wrong margins

Problems 4 and 5 occurs with any nested boxes and hasLayout, the other ones are of course specific to lists.

If all the properties (margin, padding, display) on the elements that make up the lists are set to suitable values, see IE7-/Win bugs with lists and hasLayout, page 2, some of the problems can be fixed, but many remain.

1. Unordered list with list-style-position: inside

1.1 no hasLayout

1.2. hasLayout on the <div>

1.3. hasLayout on the <ul>

1.4. hasLayout on the <li>s

1.5. hasLayout on the <div> and on the <ul>

1.6. hasLayout on the <div>, on the <ul>, on the <li>s

2. Unordered list, with list-style-position: outside

2.1. no hasLayout

2.2. hasLayout on the <div>

2.3. hasLayout on the <ul>

2.4. hasLayout on the <li>s

2.5. hasLayout on the <div> and on the <ul>

2.6. hasLayout on the <div>, on the <ul>, on the <li>s

3. Ordered list, with list-style-position: inside

3.1. no hasLayout

  1. uno
    one
  2. due
    two
  3. tre
    three

3.2. hasLayout on the <div>

  1. uno
    one
  2. due
    two
  3. tre
    three

3.3. hasLayout on the <ul>

  1. uno
    one
  2. due
    two
  3. tre
    three

3.4. hasLayout on the <li>s

  1. uno
    one
  2. due
    two
  3. tre
    three

3.5. hasLayout on the <div> and on the <ul>

  1. uno
    one
  2. due
    two
  3. tre
    three

3.6. hasLayout on the <div>, on the <ul>, on the <li>s

  1. uno
    one
  2. due
    two
  3. tre
    three

4. Ordered list, with list-style-position: outside

4.1. no hasLayout

  1. uno
    one
  2. due
    two
  3. tre
    three

4.2. hasLayout on the <div>

  1. uno
    one
  2. due
    two
  3. tre
    three

4.3. hasLayout on the <ul>

  1. uno
    one
  2. due
    two
  3. tre
    three

4.4. hasLayout on the <li>s

  1. uno
    one
  2. due
    two
  3. tre
    three

4.5. hasLayout on the <div> and on the <ul>

  1. uno
    one
  2. due
    two
  3. tre
    three

4.6. hasLayout on the <div>, on the <ul>, on the <li>s

  1. uno
    one
  2. due
    two
  3. tre
    three

CSS tests home