Misalignment of Facebook & Twitter buttons

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

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

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

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.