Question

I have a client page where I have I the following that shows up great on Firefox:

http://cl.ly/0u0h1S110f2J2N2E093d (screen shot)

However on Chrome and Safari it shows up like this:

http://cl.ly/0a132U3h1G2x1W3R0043 (notice the Facebook Share button)

The code for the buttons is:

<div class="social">
  <div>
    <div class="fb"> <a name="fb_share" id="fb_share" type="button"></a>
      <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </div>
    <div class="twit"> <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
  </div>
</div>

I have the following CSS that works GREAT for FF, but not on the other two browsers:

div.social div div {display: inline-block;}
div.social div div.fb {margin-bottom: 1px;}

I have tried every combination of attributes I can think of to get this to work, to no avail.

Any ideas?

Thanks!

Answer 1

Use vertical-align: top:

div.social div div.fb {
    vertical-align: top;
}

Working example: http://jsfiddle.net/dFt8N/