Like Button Width Not Working - Causes Browser Horizontal Scrolling

I have two instances of where the Like Button is not "listening" to the width I specify in the XFBML code.

It LOOKS fine, but something is mysteriously causing the like button to be extra wide and force the browser to do horizontal page scrolling even though the entire like button is within the page.

Example: [EXAMPLE REMOVED] - see the sidebar. I have to set the entire BODY to ignore overflow-x. If not, the like button causes a ton of extra pixels out there (but I can't see them with Firebug). I know this is the problem because if I remove it, then it looks fine.

Example 2: Screenshot of Example - In the header, I had to move the margin over so far to the left, and I wanted it to be in the top-right corner. Play with the CSS for fbheader in firebug and you'll see.

The code I'm using there:

<div class="fbheader">
<div id="fb-root"></div>
<script>
 window.fbAsyncInit = function() {
 FB.init({appId: 'your app id', status: true, cookie: true,
         xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
  '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());

 <fb:like href="http://www.example.com" send="true" width="300" show_faces="false" font="arial" colorscheme="da开发者_Python百科rk"></fb:like>
</div> <!--// End fbheader -->

Any ideas why this is happening?? Can anyone help? It seems like a bug with the XFBML.

I had the same problem, but none of the suggestions above worked for me. I found another solutions that did work, see http://britishinside.com/archive/2011/07/07/Facebook-Like-Button-Bug.aspx

Simply include this in your stylesheet:

#fb-root > div { left:0 } 

It's a bug with facebook. Why don't you just update your fbheader class as follows:

.fbheader {
  overflow:hidden;
}

That should solve your issue ..

Good luck..

I had the same problem. I found the problem was to do with a bug in Facebook's reset div. I fixed it like this:

#fb_like .fb_reset {
    /* fix for Facebook bug which causes horizontal scrollbars in browser */
    display: none;
}

I fixed the issue using #fb-root { display: none; }

You could try alter the width of fbheader class in css file, or even better, the parent element.

Sometimes when we use internal elements that cause the parent to get wider, the horizontal scroll get visible.

Another tip is to reposition the button, or set the margins and padding narrow.

My solution is to apply this to the parent container:

.my-parent-wrapper {
    display: inline-block; 
    overflow: hidden;
}

skipping overflow rule will work too

I've just had the same problem, using an iFrame script from facebook for a double "share" and "like" button. I hadn't specified a width in pixels. Fixed it by getting a replacement script, but this type specifying a width of 120 pixels in the box provided.