css - How to add equal padding between buttons?


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.




2 Answers: 

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.

 

This is not really the answer, but might help a bit down the road:

  1. No block elements in inline elements (you have the and inside it some divs etc. make it a div).

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

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

  4. 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)?

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

 

More Articles


macos - uninstall python on mac Mavericks

I'm a new Mac user. I installed python 2.7.6 but I cannot run my scripts (through IDLE or simply a script). I want to reinstall it but I don't want to mess with the version which comes pre-installed on mac.Thank you for your help.note: there are questions on stackOverflow that are similar to mine, y

php - how to set a page active automatically when it is loaded

i want to change the active class when each page loaded. my jquery code is$(document).ready(function () {$('.nav li a').click(function(e) { $('.nav li a.active').removeClass('active'); $(this).addClass('active'); e.preventDefault();});});and my html code is<ul class="nav nav-stacked bg-n

reactjs - What is the benefit of @emotion/core over emotion for a React project?

If I install emotion then the API is nice and clear: package.json:"dependencies": { "emotion": "^10.0.9",React component: import React from "react";import { css } from "emotion";const someStyle = css` display: none;`function MyComponent() { return ( <div className={someStyle} /> );}Ho


specifications - Essential techniques for pinpointing missing requirements?

An initial draft of requirements specification has been completed and now it is time to take stock of requirements, review the specification. Part of this process is to make sure that there are no sizeable gaps in the specification. Needless to say that the gaps lead to highly inaccurate estimates,

javascript - jQuery .load: any way to load the same page when page is refreshed

So I have a website that loads pages to a container div:function goto(addr) { $("#content").load(addr);}and a link that executes it<a href="#" id="aboutus" onclick="goto('page/aboutus.php');">About us</a>My problem is that whenever the page is refreshed, the loaded content resets to t

javascript - Why are props being shared between seperate instances of an emotion-js component?

Why does emotion-js appear to share the props from seperate component instances?<Button isDisabled={'true'} /><Button />const Button = styled.button` background-color: ${props => props.isDisabled !== 'true' ? 'green' : 'grey'};`;export default (props) => { return (<Button>


mysql - PHP-FPM crashes when having too many users while doing a heavy job

I have a Server running Apache/2.2.22 (Debian), PHP 5.6.17 as FPM and MySQL 5.6.25.The project runs using a CMS called Redaxo (I don't think it's that important, but I'll tell ya anyway). In Redaxo there are some functions which take some time (e.g. deleting cache and rebuilding it takes 1-2 minutes

Java's "forEach" to Scala

How can the following be converted to scala? If I live it as it is, I'm getting a big type mismatch expected.entrySet().forEach(entry -> {..})I tried specifying entry to java.util.Map.Entry, or changing to scala foreach, doesn't work.Let me know if you need any more info/code, and I'll create som

macos - What is the difference between installing python from the website and using brew?

I have a Mac with OSX 10.11.6. I used brew to install python3. It installed python 3.5.2, but I need python 3.5.1. I've been googling, but can't figure out how I would install 3.5.1 via brew. So I went to python.org and downloaded the python-3.5.1-macosx10.6.pkg. I searched for how installing python

java - Hadoop options are not having any effect (mapreduce.input.lineinputformat.linespermap, mapred.max.map.failures.percent)

I am trying to implement a MapReduce job, where each of the mappers would take 150 lines of the text file, and all the mappers would run simmultaniously; also, it should not fail, no matter how many map tasks fail.Here's the configuration part: JobConf conf = new JobConf(Main.class); c