How to add equal padding between buttons? - css

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>
Tweet<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.

Answer 2

This is not really the answer, but might help a bit down the road:
No block elements in inline elements (you have the and inside it some divs etc. make it a div).
Validation:
try fixing the validation (though most of it is probably the fb stuff):
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbuttonspace.com%2F
Try reducing the problem to the bare minimum. Eg. make a page with just the header part in it. and remove as much html as you can, with the error still there. then try to fix it from there. sometimes it's hard to see if the problem is really an issue from some faulty css/html before it.
The different boxes are styled differently (or at least they have different classes etc.) Try unifying it. Thought maybe the boxes are made with some javascript (I'm not sure, I haven't used thoses boxes before)?
Try doing this, with just some colored divs and see if you can make them be padded properly, then switch to the social buttons one by one.
I hope this can help you get started.
Edit: I think the problem is the FB button... try removing that or looking at the .fb_iframe_widget class there.