JQuery problem setting height in Internet Explorer

Question

This script takes the height value of each span element and applies it to its parent li element ( I wrote it to solve some float / layout issues). It works perfectly in Firefox and Chrome: after execution, I check the html and everything has worked alright.

However, in IE 7 and 8 (havent bothered trying with IE6, screw that) it doesnt work properly. Instead, it sets all li's height to auto.

This is my code:

$(".fase ol > li").each(function(index) {
var li_content_height = $('span', this).css('height');
$(this).css('height', li_content_height )   
});

And the HTML:

<div class="fase">
<ol>
<li>
<span>blablablablabla</span>
</li>
<li>
<span>blablablablabla</span>
</li>
</ol>
</div>

Answer 1

Huh? Where are you defining an explicit height? Did you mean to do $('span', this).height()?

Would be useful if you provided a demo of the real code so we understand the context in regards to the layout/design...

Edit: You should show us your real underlying problem and layout so we can help you solve it without using scripting.

Edit #2: Without your scripting, the 1's become 1, 2, 3, 4, 5 properly. The horizontal margin becomes a little inconsistent. You should be able to just zoom:1 on the li. I think you need to refactor your CSS instead of rely on scripting, positive it can be solved without it. Also, you have serious markup issues because some tags are not closed properly, validate it.

Answer 2

Have you tried using height instead?

var li_content_height = $('span').height() + $(this).height();
$(this).css('height', li_content_height);

If you want the height including padding or margin, then you can use outerHeight:

var heightWithPadding = $('span').outerHeight();
var heightWithPaddingAndMargin = $('span').outerHeight(true);

Answer 3

Use .height() instead of .css('height')