title: Facebook Like Button creating divs with CSS styles of -2000px, creating white boxes on site
body: <p>I'm using the standard HTML5 FB Like plugin, and all seemed to be well - until I viewed a page on my site that is lengthy, and I noticed two boxes in the middle of my content, well away from the Facebook Like button. I've had the same issue with the XFBML version.</p>
  
  <p>By looking at the code of the button that is generated, I  can see that a <code>div</code> is created inside of <code>div id="fb-root"&gt;</code> with its styles set to <code>position: absolute; top: -2000px;</code>. </p>
  
  <p>If you go to <a href="http://connect.facebook.net/en_US/all.js" rel="nofollow">connect.facebook.net/en_US/all.js</a>, you can see that this is created and set on line 26, col 2282. It says: <code>ga.style.position='absolute';ga.style.top='-2000px';</code></p>
  
  <p><strong>On pages less then this height, you don't see the boxes. But on pages longer then this, the boxes appear. Why? How can I get rid of these? What am I doing wrong?</strong></p>
  
  <p>The button code:</p>
  
  <pre><code>&lt;div id="fb-root"&gt;&lt;/div&gt;
  &lt;script&gt;(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=&lt;my app id&gt;";
          fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
          &lt;div class="fb-like" data-href="&lt;my page&gt;" data-send="true" data-width="200" data-show-faces="true" 
               data-layout="button_count" data-action="like" data-font=\"arial\"&gt;&lt;/div&gt;
  </code></pre>