title: Prototype JS 'getHeight()' changing object visibility and other madness
body: <p>I am using JS (Prototype &amp; Scriptaculous) to dynamically set the height of a div after an element is added inside the div. My code has been paraphrased below:</p>
  
  <pre><code>    bheight = $('body_'+current_item).getHeight();
      bheight += 22;
      bheight += 'px';
      $('body_'+current_item).setStyle({
      height: bheight
      });
  </code></pre>
  
  <p>In the code above, I first use the 'getHeight()' function to get the height of the unique body div. Then I add 22 to that number, and append 'px' to the end, and apply the change using 'setStyle'.</p>
  
  <p>Here comes the weird part. When I run my function that this resides in after page load, everything runs perfectly. If, however, I add a line to run the function at the end of the javascript file (so it is run as the page loads), I get madness. The entire div disappears as the visibility has been magically changed. See a snippet below for info.</p>
  
  <pre><code>&lt;div id="body_1" class="edit_bg_box" style="position: absolute; visibility: hidden; display: block; width: 200px; height: 22px;"&gt;Internal div data...&lt;/div&gt;
  </code></pre>
  
  <p>Nowhere in my CSS or code am I setting the visibility to hidden or position to absolute. To compare, below is a snippet of what the div <strong>should</strong> look like.</p>
  
  <pre><code>&lt;div id="body_1" class="edit_bg_box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>At this point I'm losing my sanity. If I remove the 'getHeight()' function from the main div, everything displays normally (except for the div height which 'getHeight()' was supposed to fix). If I add the 'getheight()' function, the div disappears completely.</p>
  
  <p>Any help would be greatly appreciated.</p>