I am trying to put a Google Plus One and a Facebook Like button inline next to each other. For some reason the Facebook like button has a gap at the top which moves it down by a few pixels and makes it look funny.

Example: /

Is there a better way to align these two buttons?

I am trying to put a Google Plus One and a Facebook Like button inline next to each other. For some reason the Facebook like button has a gap at the top which moves it down by a few pixels and makes it look funny.

Example: http://jsfiddle/Chevex/yF4yz/

Is there a better way to align these two buttons?

• javascript
• facebook
• facebook-like
• google-plus

Share Improve this question Follow asked Apr 16, 2012 at 15:42 ChevCastChevCast 59.3k6666 gold badges221221 silver badges325325 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

The problem is that the css styles are being loaded with the images. You can either set the css on your page ( remended ) or in javascript, do a document on load, and change the values once the images are populated.

Adding this css will move the facebook icon up 3 pixels, and to the left 25 pixels, next to the google icon.

div.fb-like
{
    top:-3px;
    left:-25px;
}

This seems to work in Chrome: http://jsfiddle/yF4yz/8/