Question

I have a page with an ordered list and it’s rendering fine in all browsers except IE7. In IE7, the listing numbers shown at the bottom of the <li>; actually the list contains only a <textarea>.

Here is the code looks like, view it in IE7 you can see the numbers shown in the bottom of each <li>.

<ol style="padding-left:25px;">
<li style="margin-bottom:10px;"><textarea name="" id="" cols="5" style="width:400px; min-height:100px;"></textarea></li>
<li style="margin-bottom:10px;"><textarea name="" id="" cols="5" style="width:400px; min-height:100px;"></textarea></li>
<li style="margin-bottom:10px;"><textarea name="" id="" cols="5" style="width:400px; min-height:100px;"></textarea></li>
<li style="margin-bottom:10px;"><textarea name="" id="" cols="5" style="width:400px; min-height:100px;"></textarea></li>
</ol>

See the JS Fiddle..
http://jsfiddle.net/GFRBZ/2/

Answer 1

Try textarea { vertical-align:text-top; }