For testing a website, I am using Safari 5.0.5 and IE9 on Windows. Within the CSS file, the following code is present:
#contentarea {
background-image:url('../images/img.jpg');
background-repeat: no-repeat;
background-position: right top;
background-size:100% auto;
min-height:650px;
}
When it comes to jQuery, I am setting a height as shown below:
$(document).ready(function(){
var vertHeight = $('.innerpage #vBar').outerHeight(true);
$('.innerpage #contentarea').css({'height':vertHeight });
});
The height gets applied correctly within the style attribute of the div. However, in these browsers, the min-height value always takes precedence even if the height is lower than min-height. Essentially, the browser ignores the height.
I include min-height in the CSS because I want the div to have at least that minimum height upon initial rendering, as sometimes jQuery doesn't seem to work on the first page load.