Misalignment of Facebook & Twitter buttons

Question

The page contains two buttons, from twitter and from facebook.

What I'm observing in Firefox 3.5.15 is:

1. While the page is loading, the buttons are more or less aligned (I mean their bottom sides)
2. When the page is loaded, the facebook button moves a few pixels down, so that it's bottom side is lower than the bottom side of the twitter button.
3. If I reload the page, the buttons are again aligned, and remain in this state even after the page is loaded.

Can someone please explain what's going on and how to fix it?

Solution 1

Found the style that is pushing it down ..

If you use FireBug and scroll down to the iframe within the FB button.

This CSS style

.fb_iframe_widget iframe

has this element

vertical-align: text-bottom;

That's the one who's pushing it down.

You can override the CSS style with the following combo of selector and !important

.twitter-share-button[style] { vertical-align: text-bottom !important; }

Solution 2

I fixed this by adding vertical-align:top (This is when using their new HTML5 markup). My facebook button code now looks like:

<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-     show-faces="false" style="vertical-align:top;zoom:1;*display:inline"> </div>

I also had to add zoom:1 and *display:inline IE7 hack so that buttons show side by side

Solution 3

I just enclosed all my icons in a div and then set the line height on that div so that they all lined up (since they are all the same height and some are aligned with the top and some the bottom)

<div class="product-social-links">
    <a href="//www.pinterest.com/pin/create/but [...] >
       <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
    </a>

    <div class="fb-like" data-href="@Request.Url.AbsoluteUri" [...] ></div>

    <a href="https://twitter.com/share" class="twitter-share-button" [...] >Tweet</a>
</div>

Then the CSS

#product-details-page  .product-social-links {
    line-height: 10px;
}

Solution 4

I fixed this by adding position: relative; top: 4px; to the style attribute of the facebook iframe.

So, it looks like this:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;layout=box_count&amp;show_faces=true&amp;width=110&amp;action=recommend&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="position: relative; top: 4px; border:none; overflow:hidden; width:110px; height:65px;" allowTransparency="true"></iframe>

An imperfect solution, but it works.

Solution 5

It seems that, as of today at least, that the issue comes from an odd alignment of the <span> tag that the javascript generates within the .fb-share-button <div>. Here's my fix:

.fb-share-button span {
   top: -6px;
}

View more solutions

Comments

[Amit]

You could be more specific with the iframe by adding its class, but I hope you don't have that many iframes there...

[Roman Cheplyaka]

Thanks for the answer. I want these buttons to be centered inside a div -- can your solution be adapted to this?

[Roman Cheplyaka]

Thanks for the answer. I want these buttons to be centered inside a div -- can your solution be adapted to this?

[polarblau]

Well, I'd guess that you would have to have another div wrapping the buttons, just wide enough to fit them both and then use margin: 0 auto to center this div within it's parent div.

[Roman Cheplyaka]

Thanks. Here's what I got after playing with floating: ro-che.info/ccc/11.html. Still not exactly what I wanted (the buttons seem to be aligned by their upper rather than lower side), but what bothers me more is a large space before the facebook button. How do I get rid of it? Also, could you please explain (or point me to an explanation) why floating helps here?

[Roman Cheplyaka]

Thanks. Here's what I got after playing with floating: ro-che.info/ccc/11.html. Still not exactly what I wanted (the buttons seem to be aligned by their upper rather than lower side), but what bothers me more is a large space before the facebook button. How do I get rid of it? Also, could you please explain (or point me to an explanation) why floating helps here?

[Roman Cheplyaka]

Also, I just checked in Konqueror -- the text starts to the right of the buttons rather than below them. How to fix this?

[Roman Cheplyaka]

Also, I just checked in Konqueror -- the text starts to the right of the buttons rather than below them. How to fix this?

[Amit]

@Roman: also props on very comical comic strips. I fully enjoyed them!

[polarblau]

Check my updated. The elements have a different size which makes it impossible to align the both on top and bottom. I would tweak it, using e.g. margins to fit your needs.

[ppp]

They should put your face on money. Thank you.

[indextwo]

I actually implemented this solution a couple of weeks ago and it worked perfectly (hence the upvote) however I just noticed today (16th May 2013) that the buttons were misaligned again. I think Facebook have made some changes, and now if I remove the text-bottom declaration from my .twitter-share-button class, they line up perfectly again.

[Karl]

Best answer for sure and still the working answer as of 27 May 2014.

[JWPersh]

As of 20 Nov 2014 this is the only solution I could get to work.

[consideRatio]

2015 : great sanswer!

[consideRatio]

For a 2015 solution, check "Dan dot net"'s great clean answer

[batoutofhell]

Worked like a charm after much frustration.

[Anmol Gupta]

Worked for me too. Thanks!

[Raymond Ma]

When I came up with the solution I was just hacking away.. but 'initial' is essentially the default value of baseline for the vertical-align property. @nicorellius's answer explains FB was using vertical-align: bottom for the spans.

[Alex]

Nice answer, I tried the one marked as solution and it didn't work, good job!

[Mark]

CSS does not allow nested brackets, does it? This works for me: fb_iframe_widget span { vertical-align: initial !important; }

[Raymond Ma]

sorry I wrote it in scss. The css syntax is what @Mark has.

[leymannx]

2017: Still best answer.

[greeble31]

I had to use 11px. Tested in 3 browsers, very similar setup. What gives?

[Houman]

It has changed. It is now 11px.

[brucemax]

2019 Work for me only after removing #product-details-page Also use 11px