Question

I’ve recently added a facebook like button to my site and it’s causing a horizontal scrollbar to appear when it’s not needed. It doesn’t appear in Chrome but is there in Firefox and IE.

I’ve checked the created code in Firebug and can’t see what’s going wrong.

Here’s a link to the site so you can see: http://www.swiftfurniture.com/

As you can see, on Firefox and IE (possibly other browsers too), there’s a horizontal scrollbar when it isn’t needed. It’s definitely the Facebook like button causing it, because when I comment that out, they disappear.

I’ve added a fixed width div around the button with overflow: hidden applied, but it seems to ignore that.

I know there’s plenty of other questions similar to this, but with using PrestaShop I don’t really want to mess around with the core code too much just to get a Facebook Like button working (if at all possible). I was hoping for a solution to keep all the code contained to the “social module” I’ve created… i.e – just one file rather than messing around with header files etc of PrestaShop.

Answer 1

I’ve looked into your problem a bit with Firebug and can share some observations that might be helpful.

There is code that is being injected into your <div id="fb-root"></div> and within that is an iframe with an inline style width of 575px.

That is what is causing the scrollbars.