homepage Welcome to WebmasterWorld Guest from 54.204.141.129
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Microsoft / Microsoft Windows 8 Operating System
Forum Library, Charter, Moderators: bill

Microsoft Windows 8 Operating System Forum

    
Like button code drops images to next line
Gilead




msg:4651057
 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?
Thanks!

 

mack




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

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?

Mack.

Gilead




msg:4652785
 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.

Gilead




msg:4652786
 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.

Hoople




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

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.

Gilead




msg:4653718
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Microsoft / Microsoft Windows 8 Operating System
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved