title: jQuery .append() in Firefox: vertical scrollbar appears?
body: <p>I want to dynamically add a number of DIVs to a target DIV in my page with .append(), then set their heights and positions so they're all visible in the page without scrolling.</p>
  
  <p>All of this goes OK, but in Firefox (3.6.16 on Ubuntu) a vertical scrollbar appears, as though the height of each new DIV were being added to the total height of the page content - even though each new DIV is up near the top of the screen, and its height isn't anywhere near the length of the screen. Ubuntu Chrome behaves fine. When I ask jQuery for the height of the target DIV after appending the new DIVs, it hasn't changed.</p>
  
  <p>Here's most of the page code for a test page I wrote to isolate the problem - thanks in advance!</p>
  
  <pre><code>        &lt;style type="text/css"&gt;
          #target {
              width: 50px;
              height: 50px;
              background-color: #cfc;
          }
      &lt;/style&gt;
      &lt;script&gt;
          $(document).ready(function() {
              var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');
  
              for(i = 0; i &lt; 10; i++){
                  $('#target').append('&lt;div id="new_' + i + '"&gt;Hello&lt;/div&gt;');
                  $('#new_' + i)
                  .position({
                      my: 'left top',
                      at: 'left top',
                      of: '#target',
                      offset: '' + (i * 20) + ' ' + (i * 10)
                  })
                  .width(200)
                  .height(150)
                  .css('background-color', cols[i]);
              }
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="target"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>