http://healthybodyguru.com

Should you load the website and wait 3 seconds you will see the attentionGrabber bar come in the header. It's shortcodes to include the social buttons (Facebook, Twitter, G+1), but for whatever reason the Google +1 button is simply too high.

I have attempted adding custom CSS to reduce it with the addition of margin/padding to the peak but that did not really make a difference.

Any ideas what CSS I'm able to use to really make it fall into line using the other social buttons?

Thanks!

As you can tell I love divs and never spans. I have always become better is a result of divs than spans when css is experimenting.

<div id="attentionGrabber">

  <div id="centeredPart" style="width: 575px; margin:0 auto">

    <div style="float:left;" class="facebookBtn">
      ...like code....
    </div>  

    <div style="float:left;" class="twitterBtn" >
      ...twitter code...
    </div>  

    <div style="float:left;" class="plusoneBtn">
      ...+1 code...
    </div>

    <div style="float:left;" class="linkToForums">
      Check out our new forums:
      <a class="link" href="http://healthybodyguru.com/forum/">go!</a>
    </div>

    <div style="clear:both"></div>

  </div> 

 <div id="closeAttentionGrabber"></div>


</div>

The answer ended up being to add:

#attentionGrabberWrap .plusoneBtn iframe{
   margin-bottom: -3px !important;
}

I acquired the aid of the wordpress plugin creator :)

Try setting:

#___plusone_0 {
    font-size: default; !important
}

Override inline CSS styles with !important.

try placing a span tag round the google +1 button and pad topping.

<span style="padding-top:5px;">[shortcode]</span>

I'm not sure should you attempted this with custom css but when not try it out and find out what goes on. a method tag within the html should override any styling the stylesheet is giving the element.