Misalignment of Facebook & Twitter buttons

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?

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