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:
- disappearing list markers
- wrongly positioned list markers, for example at the bottom of a <li> taking more then one line, or not inside/outside as specified
- numerical markers no more "counting"
- changing of the area where the onmouseover event on <li> is triggered
- 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
3.2. hasLayout on the <div>
3.3. hasLayout on the <ul>
3.4. hasLayout on the <li>s
3.5. hasLayout on the <div> and on the <ul>
3.6. hasLayout on the <div>, on the <ul>, on the <li>s
4. Ordered list, with list-style-position: outside
4.1. no hasLayout
4.2. hasLayout on the <div>
4.3. hasLayout on the <ul>
4.4. hasLayout on the <li>s
4.5. hasLayout on the <div> and on the <ul>
4.6. hasLayout on the <div>, on the <ul>, on the <li>s
CSS tests home