Question

I cannot figure out why I have a random space between the twitter and G+ buttons.
Here’s an example: http://i951.photobucket.com/albums/ad356/osjoe2/Snip2.png

CSS:

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

HTML:

    <div id="share">
    <ul>

    <li style="padding-bottom:5px">
    {exp:fbc:like
    href="{url_title_path="shout/comments"}"
    send="false"
    layout="button_count"
    width=""
    show_faces="false"
    action="like"
    colorscheme="light"
    font="arial"
    }
    </li>

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

    <li><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></li>

    </ul>
    </div>

Thanks for any help!

Answer 1

Different social buttons, once dynamically added to your page, will have their own width and height attributes.

You should give a unique class to each <li> (such as .social-facebook, .social-twitter) and tweak their widths accordingly.