CODEWITHSUNDEEP
phphtmlcssbuttonfacebook-like
hj8ag
hj8ag

Reputation: 305

Like Button Alignment woes

I'm currently re-designing the layout of my site and am trying to position my Facebook like button on the bottom of my page, next to my 'Tweet' button... However there seems to be a five pixel difference between the top and bottom of each button, knocking them out of alignment... I've tried setting the padding and the margin of the div to 0 but this hasn't worked either...

The page can be seen here: http://www.jameshenry.info/test/video.php?video=14

Any ideas on why the tops of each button are not aligned?

Upvotes: 1

Views: 777

Answers (3)

user1106352
user1106352

Reputation:

try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Azari & III - James Henry
</title>
<link href="scripts/page.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class = 'rightbar'>
<div class = 'videobox'>
<iframe src="http://player.vimeo.com/video/28767067?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp" width="640" height="360" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe><BR><div class='video-title'>Azari & III</div><div class='video-subtitle'>Manic (Directors Cut)</div><BR><div class='back'><a href="./">&laquo;back</a></div></div>
</div>
<div class ='bottombar'>
    <div style="margin: 3px 3px 0px 3px; position: relative; float: left;"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></div>
    <div style="margin: 3px 3px 0px 3px; position: relative; float: left;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like show_faces="false" layout="box_count" width="75" padding="0" margin="0" font="lucida grande" !important ></fb:like></div>
<div>
</body>
</html>

Upvotes: 0

will
will

Reputation: 4575

Unfortunately there isn't much that can be done, the size seems to vary along with the padding and margin across every browser. You can set a container to a specific size and overflow to hidden but then it will cut parts of the button off in one browser but not another.

Not much help, I know, but I wouldn't waste too much time on it.

One approach I've taken is to create a nice share button and have them both appear in a tooltip on hover. At least then the ugliness is hidden until needed!

Hope that helps :)

Upvotes: 1

DMCS
DMCS

Reputation: 31870

Try the following

<div class="bottombar">
  <div style="float:left">
    <iframe class="twitter-share-button ......
  </div>
  <div class="float:left">
    <fb:like ........
  </div>
  <div style="clear:both;"></div>
</div>

Upvotes: 1

Related Questions