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?

Answer 1

Use this code here to make it work, refer to the vertical-align part. Change the number accordingly (Current is 7):

<div class="fb-like" data-width="30" data-layout="button" data-action="like" data-show-faces="false" data-share="true" style="vertical-align:7px"></div>

Answer 2

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;
}

Answer 3

All I did was add the CSS to my page:

div.fb_iframe_widget > span {
    vertical-align: unset !important;
}

This is a bit less opinionated than some of the answers here and isolates the change to only undoing the height adjustment on the Facebook share icon.

Answer 4

I know there have been many answers, but since I struggled with this and none here worked for me, I thought I'd add my 2 cents... As has been mentioned, the span has a vertical-align: bottom; and you need to override this. I must say, even though it runs counter to CSS theory, it would really be nice if you could simply "turn off" a CSS rule like this one. I mean, what the hell FB? Icons working one day; but not the next. That is the stupidest thing I've ever heard of, ever.

Anyway...

.fb-like span {
    /* baseline is default, so it negates bottom*/
    vertical-align: baseline !important;
}

...did it for me.

Answer 5

I realise that this questions was posted some time ago, but here is the solution that I use.

.twitter-share-button {
      position:relative;
      top:6px;
      }

Answer 6

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