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)

Junior Member

joined:Oct 19, 2011
votes: 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)

Moderator from GB 

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

joined:June 15, 2001
votes: 3

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)

Junior Member

joined:Oct 19, 2011
votes: 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)

Junior Member

joined:Oct 19, 2011
votes: 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)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 2002
votes: 8

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)

Junior Member

joined:Oct 19, 2011
posts: 161
votes: 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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members