Ordered list rendering inconsistency in IE7

Question

For the following sample ordered list markup and CSS, IE7 is rendering the numbers alongside the bottom of the list item, whereas FF, Safari and Chrome are behaving as desired, with the numbers aligned alongside the top of the list item.

http://bit.ly/aCq5F5

Does anybody have any suggestions as to how to get IE7 to render with the same results? (Other versions of IE haven't been tested yet.)

Answer 1

Add

vertical-align: top;

to the li

Answer 2

Try removing the height you're setting on DIV.list-item-contents.

If its spacing you're after, try adding margin-bottom to them.