Misalignment of Facebook & Twitter buttons

T开发者_如何学编程he 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?

I fixed this by adding vertical-align:top (This is when using their new HTML5 markup). My facebook button code now looks like:

<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-     show-faces="false" style="vertical-align:top;zoom:1;*display:inline"> </div>

I also had to add zoom:1 and *display:inline IE7 hack so that buttons show side by side

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

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

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.

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

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

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

This worked for me as a charm:

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

Twitter and facebook button can be fixed vertically aligned

 vertical-align: top !important;

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

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

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

worked for me

I know there have been many answers, but since I struggled with this and none here worked for me, I thought I'd add my 2 cents... As has been mentioned, the span has a vertical-align: bottom; and you need to override this. I must say, even though it runs counter to CSS theory, it would really be nice if you could simply "turn off" a CSS rule like this one. I mean, what the hell FB? Icons working one day; but not the next. That is the stupidest thing I've ever heard of, ever.

Anyway...

.fb-like span {
    /* baseline is default, so it negates bottom*/
    vertical-align: baseline !important;
}

...did it for me.

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

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

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>

All I did was add the CSS to my page:

div.fb_iframe_widget > span {
    vertical-align: unset !important;
}

This is a bit less opinionated than some of the answers here and isolates the change to only undoing the height adjustment on the Facebook share icon.

Now in September 2020 a new change from Facebook. The button height is always 28px for small or large button.

To align the buttons:

Step 1: Place both buttons inside a div

<div class="socialMedia">
     <div id="fb-root"></div>
     <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0" nonce="1lGOwZCs"></script>
     <div class="fb-like" style="padding-right:4px" data-href=...></div>
     <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-url=...>Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Step 2a: Set the line-height of the div as 11px
or
Step 2b: Set font-size as 1px

.socialMedia {
    float: right;
    width: 250px;
    display: block;
    padding-top: 25px;
    text-align: right;
    line-height: 11px
}

or

<div class="fb-like" style="font-size:1px;display:inline-block;"...</div>

Step 3: Set height as 20px
The generated span inside the Facebook div is force to have the same height as Twitter iframe of 20px:

div.fb_iframe_widget > span {
    height: 20px !important
} 

The above values are for the small button. For the large buttons, the values must be changed properly.