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>

 

4 Comments


  • Use this as a work around

    ol li {
    display:list-item;
    height:40px;
    }

    Regards,
    Raj Kaimal

  • 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).

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

    Paul

  • 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*

Comments have been disabled for this content.