CODEWITHSUNDEEP
htmlcssfacebooktwittervertical-alignment
Crashalot
Crashalot

Reputation: 34503

How to align Facebook and Tweet buttons?

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!

Upvotes: 16

Views: 14412

Answers (3)

Agus Putra Dana
Agus Putra Dana

Reputation: 719

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

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

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

Upvotes: 25

mylesagray
mylesagray

Reputation: 8869

Just add:

height:63px; to the class of the FB iFrame in CSS: enter image description here

Upvotes: 6

Related Questions