Internet Explorer and Ordered List Bug

Today, I happen to run into, what I thought, was a really strange  bug in Internet Explorer 7 and below. Since, it took me awhile to find an answer to this problem I thought I could shed some further light on it. The problem I ran into was Internet Explorer was not counting the items in an ordered list correctly. Instead of 1,2,3,4,5,6 IE was outputting 1,1,1,1,1,1. Further, the problem also made the numbered bullet appear towards the bottom of the list item when they contain multiple lines. I found the answer to my problem at kirupa.com.

The first problem of the miscounting can be solved by doing the following:

.container ol
{
   list-style-type: decimal;
}
.container ol li
{
   display: list-item; 
}

Then for the second problem where the numbers line up to the bottom of the list elements just add the code in red:

.container ol li
{
   display: list-item;
   vertical-align:top;
}

That should take care of that problem. I hope this helps you out and keeps some headaches away.

Leave a Reply

Your email address will not be published. Required fields are marked *