tags:

views:

84

answers:

2

I currently have the following html which does not show the ordered list properly on IE7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<style>
li {
  min-height: 20px;
}
</style>

<ol id='id-booking-steps'>
  <li>Stackoverflow</li>
  <li>Superuser</li>
  <li>Serverfault</li>
</ol>

The output looks like the following:

1. Stackoverflow
1. Superuser
1. Serverfault

If I remove the min-height, then everything is fine. Assuming I can't touch the min-height, is there a way to make the number of an ordered list display properly by using jQuery?

+1  A: 

Try this:

   <ol>
    <li value="30"> makes this list item number 30.
    <li value="40"> makes this list item number 40.
    <li> makes this list item number 41.
    </ol>
pixeline
+3  A: 

See this http://haslayout.net/css/No-Increase-on--ol--Numbers-Bug.

Apparently the fix is to add a display : list-item style to li. No jQuery needed.

Chetan Sastry