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

Then back to the first solution here, a bit.

"top" is also ok.

This is my solution for the joomla plugin (see http://www.compago.it/software/41-compago-software/347-facebook-twitter-google1-plugin-for-joomla.html):

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

Answer 2

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

Answer 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.

Answer 5

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 6

This worked for me as a charm:

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