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

Answer 1

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