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.) Many problems show up when hasLayout is given to the different elements (in all IE7-/Win version, but with different behaviors.) In this page all the properties to make up the lists are specified: margin, padding (to suitable values), and display:list-item for the <li>. This fixes some of (but not all) the problems that occur when all properties are left at their default values: IE7-/Win bugs with lists and hasLayout, page 1. The problems 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

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