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

Answer 1

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 2

Now in September 2020 a new change from Facebook. The button height is always 28px for small or large button.

To align the buttons:

Step 1: Place both buttons inside a div

<div class="socialMedia">
     <div id="fb-root"></div>
     <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="1lGOwZCs"></script>
     <div class="fb-like" style="padding-right:4px" data-href=...></div>
     <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-url=...>Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Step 2a: Set the line-height of the div as 11px
or
Step 2b: Set font-size as 1px

.socialMedia {
    float: right;
    width: 250px;
    display: block;
    padding-top: 25px;
    text-align: right;
    line-height: 11px
}

or

<div class="fb-like" style="font-size:1px;display:inline-block;"...</div>

Step 3: Set height as 20px
The generated span inside the Facebook div is force to have the same height as Twitter iframe of 20px:

div.fb_iframe_widget > span {
    height: 20px !important
} 

The above values are for the small button. For the large buttons, the values must be changed properly.

Answer 3

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.

Answer 4

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

Answer 5

Twitter and facebook button can be fixed vertically aligned

 vertical-align: top !important;

Answer 6

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.