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.

List elements in early versions of IE

Older versions of Internet Explorer present a problem to many web developers. These older versions don’t support much of the modern languages and especially most of CSS3. One of the most frustrating things I have faced is making list element align horizontally next to each other. This technique is relatively commonly seen in many modern websites. Unfortunately early version s of IE do not support the easy way to do this, display: inline or display: inline-block. Using this without any other code will result in something like this:

 

IE fix for list elements

Now there are many options to fix this including adding libraries to make IE think it is a more modern browser. However, if you are like me you are probably including several libraries to make your site function just the way you like it. So adding another library is just going to slow down the site more. I found a simple solution just zoom: 1; and *display: inline; to your CSS code. This will be added along with your normal display: inline or display: inline-block. This result in it looking something like this:


IE fix for list elements

 

 

There you go problem solved! Hope this helped someone.