Wednesday, June 18, 2008

IE ol bug

Say we have the following code:

<style>
ol li {width:200px;}
</style>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

This will cause a really dumb bug in IE: the bullet numbers don't increment.

The easiest way to fix it is to remove the fixed width from the li. The problem with doing that is that IE might trigger peekaboo bugs instead, if you have floated stuff inside of the li. To get around that, we can do this:

<style>
ol li div {width:200px;}
</style>
<ol>
  <li><div>Item 1</div></li>
  <li><div>Item 2</div></li>
</ol>

No comments:

Post a Comment