CODEWITHSUNDEEP
javascriptcssgoogle-plus-one
Nathan H
Nathan H

Reputation: 49371

Google PlusOne button has some bottom margin

plusone compared to others

I'd like to know if the issue I see is just for my site or if this is a known issue.

I have some social widgets that align pretty well, but for some reason the PlusOne is not aligned correctly.

I used Firebug to compare it with the Facebook Like widget, and according to the CSS, they are both exactly the same height and neither have margins or padding. Their css looks identical.

<div>
        <fb:like layout="button_count" show_faces="false" width="90" action="like" font="verdana" colorscheme="light"></fb:like>

        <g:plusone size="medium"></g:plusone>

        <script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=d9550e2f-f25a-4e2e-ae45-7a51cf7e3d46&amp;type=website&amp;buttonText=Share%20item!&amp;embeds=true&amp;style=rotate"></script>
        &nbsp;<font face='Verdana, Arial, Helvetica, sans-serif' size='1'><a href='/mmh/recommend/send.php?prodid=$!product.id'><img src="/images/icons/icon_email.gif" border="0"> Email item</a></font>
</div>

Actually I have a link where the same thing i happening: http://news.makemeheal.com/celebrity-plastic-surgery/jennifer-aniston-weighs-on-prince-williams-hair-loss/ (if necessary, reduce your window size so Fbook and G+ are on the same line)

Upvotes: 1

Views: 2048

Answers (4)

Ciar&#225;n Tobin
Ciar&#225;n Tobin

Reputation: 7526

You could try using relative positioning, e.g. add the following CSS to the G+ button:

position: relative;
top: 5px; /* Or whatever looks right */

Although, while it may fix your problem it doesn't exactly show the cause of the issue.

Upvotes: 0

aledalgrande
aledalgrande

Reputation: 5217

Put a div (class=froogle) around the +1 button, float them all and then style as you want. It worked for me:

.facebook-like, .twitter-share-button, .froogle {
  float: left;
  margin-right: 10px;
}

Upvotes: 0

achilembwe
achilembwe

Reputation: 1

Had same issue. I put the Google+ code in a <div> and used CSS to limit the max-height property of <div> to 70px and it worked.

Upvotes: 0

M. Rubio-Roy
M. Rubio-Roy

Reputation: 31

Use this:

<span style="position:relative; top:3px">
<div class="g-plusone" data-size="small" data-annotation="none"></div>
</span>

Upvotes: 3

Related Questions