Aligning FaceBook Like Button with other Buttons

Hi,

I am trying to align FaceBook Like button with Google +1 and Twitter buttons on the same row but FaceBook button is always a few pixels below the others.

You can see how it looks now below:



I tried using table but it didn't work. I am using unordered list to list the buttons at the moment. Do you have any idea how to align it?

 

Use <div style="vertical-align: top"> (or <tr valign="top"> in a table )

Obviously putting all of the buttons in the same div / table row.

If that still doesn't work, keep them in the vertically aligned div / table row as previously mentioned, and apply a 5px (or so) padding-bottom to the facebook like button..

ie: <tr valign="top"><td style="padding-bottom: 5px">like code here</td><td>G+1 code here</td><td>tweet code here</td></tr>

Chuckun

 

Tried all of them but didn't work. The strange thing is, when the page loads, the button seems aligned correctly but it comes a few pixels down after the loading is complete in a fraction of seconds.

 

Would be easier to help if you would give the source code you're using or point to your site.

 

You are right. Here is the code I have (The site is not published yet.):

<div id="share">
<ul>
<li style="padding-bottom:5px"><fb:like href="" send="false" layout="button_count" width="60" show_faces="false" action="like" font="segoe ui"></fb:like></li>
<li><g:plusone size="medium"></g:plusone></li>
<li><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a></li>
</ul>
</div>

HTML:

#share { margin:0 30px; vertical-align: top }
#share ul { margin:0 0 10px 0; padding:0 0 5px 0; list-style:none; border-bottom:1px solid #eee }
#share li { display:inline }

Code (markup):

 

Have you tried adding vertical-align: top; or bottom inside #share li { } ?

 

I guess I missed that. It is aligned now. Thanks a lot both of you.

 

No problemo! Be sure to make use of the 'Best Answer' feature so people know they can find the answer if anyone has the same problem

 

Nice feature, I didn't see it before.

 

Hello,

I am having the same issues and it is frustrating me to death!

I tried what you did, copied your code exactly as you had it and it is not working.

Any help please?