Welcome to WebmasterWorld Guest from

Forum Moderators: bill

Message Too Old, No Replies

Like button code drops images to next line



5:23 pm on Mar 4, 2014 (gmt 0)

I have a facebook like button set up on a client's site. Next to it are two other images. For whatever reason, those images drop to the next line in Win 8, but are just fine on 7, XP

placed in head
<div id="fb-root"></div>
<script>(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_GB/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

placed in body
<div id="vlign" class="fb-like-box" data-href="https://www.facebook.com/clientpage" data-width="292" data-show-faces="true" data-stream="false" data-header="false"></div>

I've played with the width of the like box and with the width of the two images it still drops them to the next line. Can anyone give me a hand with this?


6:30 pm on Mar 8, 2014 (gmt 0)

WebmasterWorld Administrator mack is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

It looks as if the fb like button is within a div of its own. When you think of the box model it may cause the remaining images to be placed below it.

Is there any other difference you can think of between the systems other than OS?

Are you testing on the same browser on all systems?



6:46 pm on Mar 10, 2014 (gmt 0)

No, no difference that I can think of. It looks the same in Moz and IE in XP and Win 7, it's just win8 that's being problematic. I'll try putting the other images inside the div and see if that works.


6:51 pm on Mar 10, 2014 (gmt 0)

Nope that doesn't work. If I put anything inside the div, the whole facebook box disappears.


12:18 am on Mar 11, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I've found setting a width and height on the outermost DIV usually fixes up most of these widgets 'not playing nice' with layout.

How you treat images in your CSS may have an influence (sum of all dimensions exceeds calculated width - differnt browser/OS react differently). I use a short reset on IMG for outline:none and border:none. A few I had to add overflow:hidden to stop the wonkyness. Boxing them like above I've found fixes almost all of the major issues.


3:30 pm on Mar 13, 2014 (gmt 0)

It does have a width parameter, but I changed it from 292 to 140 just to see and it still dropped the images to the next line. The widths of the other two images are 206 and 203. (pixels). It appears the div is the problem, but I can't take it out.

Featured Threads

Hot Threads This Week

Hot Threads This Month