Jquery .height() Inconsistent Results on Page Reload
<p>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. </p>

<p>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.</p>

<pre><code>$(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 &lt; 4){
 padding = 4;
}

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

if(margin &lt; 10){
 margin = 10;
}

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

});
</code></pre>

<p>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?</p>

<p>Thanks!</p>

<p>-fucla</p>
