Question

http://buttonspace.com/

I want to put equal space between the 4 buttons at the top, but I’m having trouble. At first the “social-buttons” id was in a DIV floating left, but that caused the slider to get pushed to the right.

So I changed everything to and now the padding style doesn’t seem to have any effect.

I then tried adding “display: inline-block;” since I read that from another StackOverflow question but that didn’t help.

Here’s the current code (ignore the PHP):

<!-- Social Buttons -->
    <span id="social-buttons">
        <fb:like href="<?php echo $url; ?>" send="false" layout="box_count" width="60" show_faces="false" font="verdana" class="fb-like"></fb:like>
        <a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo $url; ?>" data-text="<?php echo $tweet_text; ?>" data-count="vertical" data-via="Button_Space">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
        <g:plusone size="tall" callback="callback" href="<?php echo $url; ?>" class="google-plus-one"></g:plusone>
        <script src="http://www.stumbleupon.com/hostedbadge.php?s=5&r=<?php echo $url; ?>"></script>
    </span>
    <!-- End Social Buttons -->

#social-buttons { display: inline-block; padding: 0 0 0 100px; }
.fb-like { padding: 3px 0 0 0; border:none; overflow:hidden; width:60px; height:90px; }
.twitter-share-button { padding: 6px 0 0 0; }
.google-plus-one { display: inline-block; padding: 0 0 0 10px; }

Any ideas? Ideally I want the best suggestion to not only space the buttons evenly, but to use proper code for putting the buttons on that header bar in the first place 😉 I’m sure my code could use lots of improvement.

Answer 1

Updated:

Something like this:

http://jsfiddle.net/MjFmN/1/

#social-buttons div,
#social-buttons iframe {
    float:left !important;
    display:inline-block !important;
    margin:0 10px 0 0 !important;
    border:none;
    overflow:hidden;
}

.fb-like {
    width:50px!important;
}

Please note that the Google+ button doesn’t appear in the Fiddle. I did test it with the actual Google+ html that the script generates and it appears to work for me on Firefox8, Window 7.

You can leave the HTML you have like it is now for this to work.

---

Another edit:

Just tried it in IE9, for some reason the FaceBook button displays in my local language causing the width to change and thus you only see part of the image ( overflow:hidden and all that ). If you can force a language setting on the FaceBook button this is solvable, but I have no experience with it to say if that is or isn’t possible.

http://forum.developers.facebook.net/viewtopic.php?id=58989 seems to have some tips on how to do that.