How to align Facebook and Tweet buttons?

Question

The Facebook and Tweet buttons on our home page are vertically misaligned, and we're confused why. We can top align the two buttons if we use Firebug and remove the height for the Tweet button. However, the height is set dynamically, and inlined, from a Twitter script. We can't seem to override the height value.

Here's the home page: http://www.panabee.com

Are we doing something wrong in the CSS? Or is there a parameter we need to set in the Tweet button to override the height value?

Our only other option is to resort to the Twitter iFrame for the Tweet button, which we prefer not to do.

Thanks!

Answer 1

Just add:

height:63px; to the class of the FB iFrame in CSS:

Answer 2

Simply add this CSS: .twitter-share-button { vertical-align:top }.

Answer 3

To solve the default style

    <span style="vertical-align: bottom">

can be fixed by seting

    .fb-like {
        line-height: 0.7
    }

or

    .fb-like span {
        position: relative;
        top: -7px
    }

in your CSS