Lists test

Back to the article

Table of contents

1. A basic unordered list (no style)
2. Adding margins
3. Adding background
4. Positioning the list marker
5. Adding an image as list marker
6. Nested lists
7. Building a vertical menu
8. Conclusion: Confusion is next

1. A basic unordered list (no style)

• Item one
• Item two
• Item three

HTML code

<ul>
 <li>Item one</li>
 <li>Item two</li>
 <li>Item three</li>
</ul>

Comments

Here is how it looks in Internet Explorer 5:

As described here, lists may have several problems in Internet Explorer. However, there are several workarounds for these problems. Now we'll see what happens when explicit style declarations are specified for lists.

2. Adding margins

• Item one
• Item two
• Item three

CSS code

.test1 {
margin: 1em 0 1em 2em;
padding: 0;
}
.test1 li {
margin: 1em 0;
padding: 0;
}

Comments

Here is how it looks in Internet Explorer 5 and Firefox 1.5:

Internet Explorer 5

Firefox 1.5

The wrong calculation of vertical margins between boxes causes the problem marked in red: if you take a look at the two screenshots, you can notice the different rendering for the bottom margin of the last <li> element in the list. Solution: use vertical padding instead of margins. We've specified only margins for the list, because of the default indentation used by browsers to mark a list without style. Padding is set to 0 because some browsers use padding to indent list. If you take a look at the default style sheet for HTML 4.0, you can see how browsers should render a list by default.

3. Adding background

• Item one
• Item two
• Item three

CSS code

 .test2 {
margin: 1em 0 1em 2em;
padding: 0;
background: #ffc;
color: #000;
}
.test2 li {
margin: 1em 0;
padding: 0;
}

Comments

Here is how it looks in Internet Explorer 5:

The list marker is put outside the background area. Results are similar in Firefox 1.5 and Opera 9. However, we have to say that specs don't define the exact positioning of the list marker (see specs).

4. Positioning the list marker

• Item one
• Item two
• Item three

CSS code

.test3 {
margin: 1em 0 1em 2em;
padding: 0;
list-style-position: inside;
background: #eee;
color: #000;
}
.test3 li {
margin: 1em 0;
padding: 0;
}

Comments

Here is how it looks in Internet Explorer 5:

We've set the 'list-style-position' property to 'inside' for the list. Notice how we cannot define the exact positioning of the marker. That's due to a lack in CSS specs.

5. Adding an image as list marker

• Item one
• Item two
• Item three

CSS code

.test4 {
margin: 1em 0 1em 2em;
padding: 0;
list-style-position: inside;
list-style-image: url(freccia.gif);
background: #fe3;
color: #000;
}
.test4 li {
margin: 1em 0;
padding: 0;
}

Comments

Here is how it looks in Internet Explorer 5 and Firefox 1.5:

Internet Explorer 5

Firefox 1.5

We've set the 'list-style-image' property for the list. Notice how we cannot exactly define the positioning of the image. Solution: set the image as background image for the <li> element.

6. Nested lists

1. Item one
2. Item two
   • Subitem one
   • Subitem two
   • Subitem three
3. Item three

HTML code

<ol class="test5">
 <li>Item one</li>
 <li>Item two
  <ul class="test6">
   <li>Subitem one</li>
   <li>Subitem two</li>
   <li>Subitem three</li>
  </ul>
 </li>
 <li>Item three</li>
</ol>

CSS code

.test5 {
margin: 1em 0 1em 2em;
padding: 0;
}
.test5 li {
margin: 1em 0;
padding: 0;
}

.test6 {
margin: 1em 0 1em 2em;
padding: 0;
list-style-type: square;
}
.test6 li {
margin: 1em 0;
padding: 0;
}

Comments

Here is how it looks in Internet Explorer 5 and Firefox 1.5:

Internet Explorer 5

Firefox 1.5

The difference lies at most in the positioning of the list marker. To avoid the typical problems of Internet Explorer related to inheritance (I mean, those concerning a containing block and its in-flow children), we did not use the descendant selector to include the unordered list into the ordered one in the CSS model.

7. Building a vertical menu

• Link one
• Link two
• Link three

HTML code

<ul class="menu">
 <li><a href="#">Link one</a></li>
 <li><a href="#">Link two</a></li>
 <li><a href="#">Link three</a></li>
</ul>

CSS code

.menu {
margin: 1em 0 1em 2em;
padding: 0;
list-style-type: none;
}

/*\*/ * html body .menu li {margin-top /*\*/: -4px;} /**/

.menu li {
margin: 1em 0;
padding: 0;
}

.menu a:link, .menu a:visited {
display: block;
margin: 0;
padding: 4px;
text-decoration: none;
font-weight: bold;
}
.menu a:hover {
background: #f1f1f1;
color: #c00;
}

Comments

Here we got some problems with the <a> element. Declaring 'padding: 4px', Internet Explorer 5 adds an extra space of 4 pixels between the block-level anchors. So we have to use the hack (marked in blue) to fix the problem.

8. Conclusion: Confusion is next

When we work with Internet Explorer 5, we have to deal with the fact that we're walking on a razor edge. An innocent declaration can break the thin ice of Internet Explorer's layout model, destroying a page that looked good also in Internet Explorer 6. This is a perfect practice if we want to gain an optimal control over our pages. Marcet sine adversario virtus.