title: Applying CSS on ready doesn't render properly until window is resized
body: <p>I have two JavaScript functions. A function called <code>Init()</code>, which checks information rendered on the page, is fired on <code>$(document).ready()</code> and, at the end of this function, it calls a function called <code>Size()</code> after it is done checking everything.</p>
  
  <p><code>Size()</code> has to be performed each time the browser is resized too, so it can balance out some CSS.</p>
  
  <p>For some reason though, <code>Size()</code> doesn't work properly during <code>Init()</code> and doesn't actually do what it should until it is called when the browser window is resized.</p>
  
  <p>Are these functions being used properly? Is <code>Size()</code> missing something on init?</p>
  
  <pre><code>var h = $(window).height(), 
      w = $(window).width(),
      m = 30; // global margin
  
  var fitTop, fitBot;
  
  function fitInit() {
      fitTop = $(".fit-compare-top").length;
      fitBot = $(".fit-compare-bottom").length;
  
      fitSize();
  }
  
  function fitSize() {
      if (w &lt; 1024) {
          $(".fit-compare-item").width(w*0.7);
          if (w &gt; 767) {
              mm = 220;
          }
          else { mm = m }
          $(".fit-compare-tops").width(Math.min(400 + m + 5,(w * 0.7 + m + 5)) * fitTop + mm);
          $(".fit-compare-bottoms").width(Math.min(400 + m + 5,(w * 0.7 + m + 5)) * fitBot + mm);
      }
      else {
  
          // this where I'm having the problem
          // the height of the follow object remains
          // unchanged until $(window).resize()
  
          $('.fit-hero-text').height(h-h/5).css({
              "padding-top": h*0.3
          });
          $(".pillars-section").height( (Math.min(1280,w)*0.4)*1.5 );
  
      }
  }
  
  $(document).ready(function() {
      fitInit();
  });
  $(window).resize(function() {
      fitSize();
  });
  </code></pre>
  
  <p>I have tried removing the <code>Size()</code> from <code>Init()</code> and putting it in <code>$(document).ready()</code> but that has the same effect.  And I obviously require this function to occur after the page is loaded, because I can't depend on a user to resize their browser.</p>
  
  <p><strong>UPDATE:</strong> If I removed the <code>padding-top</code> CSS rule from <code>$('.fit-hero-text')</code> then there is no jump on resize and height is calculated and rendered properly. Why could this be?</p>