CODEWITHSUNDEEP
cssfacebookfacebook-like
Berto
Berto

Reputation: 47

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="dark"></fb:like>
</div> <!--// End fbheader -->

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

Upvotes: -1

Views: 2106

Answers (7)

Ian Graham
Ian Graham

Reputation: 1

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.

Upvotes: 0

Vincent
Vincent

Reputation: 51

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 }

Upvotes: 5

Deskin
Deskin

Reputation: 91

My solution is to apply this to the parent container:

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

skipping overflow rule will work too

Upvotes: 0

Erik Sundahl
Erik Sundahl

Reputation: 23

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

Upvotes: 1

Andy Webber
Andy Webber

Reputation: 111

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;
}

Upvotes: 1

Sumit Mukhia
Sumit Mukhia

Reputation: 21

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..

Upvotes: 2

Ademir Mazer Jr - Nuno
Ademir Mazer Jr - Nuno

Reputation: 900

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.

Upvotes: 0

Related Questions