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

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

Answer 2

I can't tell you what's going on in there and I don't even want to think about what < fb:headache > does there, but you should be able to resolve this issue by floating the iframe for the twitter button left and adding some margin-right to get the original look back.

iframe.twitter-share-button { float: left; margin-right: 4px; }

It's a little hackish, but should do.

UPDATE

.fb_iframe_widget { display: block !important; } 
// leave important away if possible!

// change main.css / line 41:
div.text {
    clear: left;
    margin: 0 auto;
    padding: 35pt 5pt 15pt;
    width: 40em;
}

Answer 3

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 4

.fb_iframe_widget {
  span {
   vertical-align: initial !important;
  }
}

worked for me

Answer 5

I solved this by taking Guðmundur Þór Magnússon's answer and adding margin-bottom: -2px !important; to the CSS rule:

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

Answer 6

This worked for me as a charm:

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