Mark Smith

ASP.NET, SQL Server, HTML, CSS and other random thoughts!

IE7 Bug

Today I found a strange bug in IE7. If you have an unordered list, and you specifically give a height to each li element, the numbers reset themselves so each number ends up being "1"! Try this out!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">  <head>    <title>Test</title>    <style type="text/css">     ol li {height:40px;}    </style>  </head>  <body>    <ol>      <li>This</li>      <li>is</li>      <li>just</li>      <li>a</li>      <li>test</li>    </ol>  </body>

</html>

 

Comments

rajbk said:

Use this as a work around

ol li {

  display:list-item;

  height:40px;

}

Regards,

Raj Kaimal

# January 11, 2008 3:11 PM

Mark Smith said:

Thanks Raj,

I'd actually used a workaround of using line-height instead of height.

My problem with it, is that it's a bug that shouldn't exist (it happens in IE6 as well).

# January 12, 2008 2:27 PM

Paul said:

Same problem when you set the width of a LI, but the Raj's hack fixes that as well.

Paul

# January 25, 2008 12:14 PM

CET said:

I'm glad I found this site.  I just discovered this bug on a site that I'm an hour from delivering to a client.

Fortunately, the style "display:list-item;" worked, but not completely.  The numbers were at the bottom of each list item, so I also had to tell it to "vertical-align:top;".

Now my IE only style looks like this:

ol li {

display:list-item;

vertical-align:top;

}

Add these items to all the other IE only items I routinely add to my style sheets, and I can't believe how much hacky code I have to write to accomodate all of IE's bugs.

Thanks again MS! *shakes fist*

# April 16, 2009 2:49 PM