Calculating height using jQuery differs in Firefox and Chrome

Question

I have a question that was already asked here, but the solution offered there did not work. The problem is that I'm using the jQuery height() function to return the height of a div. It works nicely in Firefox, but returns a value that is 300px smaller in Chrome...

You can see an example of this bug here. Though I must say it's in Hebrew. Though that shouldn't matter much...

Has anyone had that happen before? Here's the code that calculates the height:

var heightLeftCol = $('#leftCol').height();
var sidebarHeight = $('#sidebar').height();
var minHeight = heightLeftCol > sidebarHeight ? heightLeftCol : sidebarHeight; 
$('#postArea').css('min-height', minHeight+100);

EDIT: This problem was not fixed but worked around in a way that I don't like, but it'll do for now. Here's the "solution" that I came up with:

if (jQuery.browser.safari) {
    $('#postArea').css('min-height', minHeight+400 + 'px');
}
else {
    $('#postArea').css('min-height', minHeight+100 + 'px');
}

Since both Safari and Chrome run on WebKit, the browser.safari actually selects chrome as well..I definitely do not consider this an optimal solution.

Thanks! Amit

Answer 1

In Chrome, the height of the div does not include the height of your 300-pixel tall image "sheli.jpg" because it isn't specified anywhere in the html or css. If you specify the height="300" in your <img> tag or height: 300px; as part its style, it will work.