Jquery .height() Inconsistent Results on Page Reload

Question

I'd like to adjust the margin of container divs and the padding for links within a list so that the last line-item is as close as possible to the bottom of a variably sized image next to it. The function works exactly as I had expected when the page loads the first time.

However, if the page is reloaded, the .height() and .outerHeight() functions return different values than they originally had. They also return different values depending on the browser, even though the heights are explicitly stated in an external style sheet.

$(document).ready(function(){

var headingSize = 2*($('div.title').outerHeight(true) + $('div.hint').outerHeight(true));
var adjHeight = $('#image img').height() + 70;
var rowCount = $('div#options ul li').length;
var rowHeight = $('div#options ul li a').height();

var padding = (((adjHeight - headingSize) / rowCount) - rowHeight)/2;

if(padding < 4){
 padding = 4;
}

var margin = (rowHeight + 2*padding)/2;

if(margin < 10){
 margin = 10;
}

$('div.options').css({'marginTop': margin});
$('div#options ul li a').css({'paddingTop' : padding, 'paddingBottom' : padding});  

});

Because it works on first load, I can't imagine what could be wrong with the script. Why would it be doing this? What am I missing?

Thanks!

-fucla

Answer 1

There was a discrepancy in included css files that conflicted with my definitions as to the heights of certain elements. Seems like jQuery would get erratic results because it would bounce back and forth between the two styles.

Removed the included file and everything works fine and dandy.