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

It seems that, as of today at least, that the issue comes from an odd alignment of the <span> tag that the javascript generates within the .fb-share-button <div>. Here's my fix:

.fb-share-button span {
   top: -6px;
}

Answer 2

You can easily solve this issue with CSS:

iframe { float: left; padding-right: 10px; }

EIDT: If you want them to be centered, simply wrap them in a div (which they already are wrapped with, give that div a class or an ID. For example, let's give it a class of twfb for twitter/facebook. Now in the CSS we'll declare a width and automatic margins as so:

.twfb { width: 120px; margin: 0 auto; }

EDIT 2: To remove the large margin from the facebook, simply add this to your CSS:

.fb_edge_widget_with_comment { margin-left: -26ppx; }

That should align them nice and close to each other.

That should do it!

Good luck

Answer 3

I realise that this questions was posted some time ago, but here is the solution that I use.

.twitter-share-button {
      position:relative;
      top:6px;
      }

Answer 4

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

Answer 5

The problem here is not the position, height or any other CSS, but rather the inline-block elements taking the wrong vertical alignment. The facebook element is vertial-align: top and the twitter element is vertical-align: bottom. Can all be fixed with just one line of CSS, but have to use the correct selector and !importantoverride JS applied inline styles.

iframe[style] { /* to select the outer-most element of the twitter button */
    display: inline-block;
    vertical-align: bottom !important;
} 

Answer 6

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