How to better control Firefox and Google Chrome spacing

Question

The CSS:

    body {
    background:black;
    width:960px;
    }

    #jsddm a {
    padding:5px 10px;
    font:16px Calibri;
    text-transform: uppercase;
    text-decoration: none;
    font-weight:bold;
    border: 2px silver outset;
    color: #000000;
    text-shadow:-1px 0 #AAD036, 0 1px #AAD036, 1px 0 #AAD036, 0 -1px #AAD036;
    }
    #one a {
    background:-webkit-linear-gradient(#FF0000, white 20%, #FF0000 80%); 
    background:-moz-linear-gradient(#FF0000, white 20%, #FF0000 80%); 
    background:linear-gradient(#FF0000, white 20%, #FF0000 80%); 
    }

    #two a {
    background:-webkit-linear-gradient(#FF00FF, white 20%, #FF00FF 80%); 
    background:-moz-linear-gradient(#FF00FF, white 20%, #FF00FF 80%); 
    background:linear-gradient(#FF00FF, white 20%, #FF00FF 80%); 
    }

    #three a {
    background:-webkit-linear-gradient(#00FFFF, white 20%, #00FFFF 80%); 
    background:-moz-linear-gradient(#00FFFF, white 20%, #00FFFF 80%); 
    background:linear-gradient(#00FFFF, white 20%, #00FFFF 80%); 
    }

    #four a {
    background:-webkit-linear-gradient(#00FF00, white 20%, #00FF00 80%); 
    background:-moz-linear-gradient(#00FF00, white 20%, #00FF00 80%); 
    background:linear-gradient(#00FF00, white 20%, #00FF00 80%); 
    }

    #five a {
    background:-webkit-linear-gradient(#FFFF00, white 20%, #FFFF00 80%); 
    background:-moz-linear-gradient(#FFFF00, white 20%, #FFFF00 80%); 
    background:linear-gradient(#FFFF00, white 20%, #FFFF00 80%); 
    }
    #six a {
    background:-webkit-linear-gradient(#990099, white 20%, #990099 80%); 
    background:-moz-linear-gradient(#990099, white 20%, #990099 80%); 
    background:linear-gradient(#990099, white 20%, #990099 80%); 
    }

    #seven a {
    background:-webkit-linear-gradient(#3366FF, white 20%, #3366FF 80%); 
    background:-moz-linear-gradient(#3366FF, white 20%, #3366FF 80%); 
    background:linear-gradient(#3366FF, white 20%, #3366FF 80%); 
    }

    #eight a {
    background:-webkit-linear-gradient(#FF9900, white 20%, #FF9900 80%); 
    background:-moz-linear-gradient(#FF9900, white 20%, #FF9900 80%); 
    background:linear-gradient(#FF9900, white 20%, #FF9900 80%); 
    }


    #jsddm {
    width: auto;
    height:auto;
    text-align:center;
    margin-left:-42px;
    margin-top:-10px
    }

    #jsddm li { 
    text-align:center;
    padding: 0.5px;
    display: inline;
    width:auto;
    height:inherit;
    float: left;
    }


    #jsddm li a:hover {
    color: #AAD036;
    text-shadow:-1px 0 #669933, 0 1px #669933, 1px 0 #669933, 0 -1px #669933;
    font: 16px Calibri;
    padding-top: 6px;
    font-weight: bold;
    padding-bottom: 6px;
    }
    </style>

The HTML:

    <ul id="jsddm">
        <li id="one"><a href="index.html">About</a></li>
        <li id="two"><a href="http://http://www.android.com/">Official&nbsp;Page</a></li>
        <li id="three"><a href="http://developer.android.com/index.html">Developers</a></li>
        <li id="four"><a href="https://play.google.com/store">Google&nbsp;Play</a></li>
        <li id="five"><a href="http://www.android.com/phones-and-tablets/">Phones&nbsp;&amp;&nbsp;Tablets</a></li>
        <li id="six"><a href="http://www.android.com/versions/kit-kat-4-4/">Kit&nbsp;Kat&nbsp;&#40;4.4&#41;</a></li>
        <li id="seven"><a href="http://www.android.com/apps-and-entertainment/">Entertainment</a></li>
        <li id="eight"><a href="https://plus.google.com/+android/posts">Google+</a></li>
    </ul>

Hi guys,

I have a JQuery header with different colored buttons (li) which brings you to a unique link. I have got that working fine, but the spacing within each button is different in Firefox and Chrome, as you can see in the picture. I've been changing my code for hours in an attempt to maintain the aspect ratio of each. I even went to the extent of setting the width of each button. Can you guys help me out in troublehshooting this?

Answer 1

The reason is that some font types renders different cross browsers. I tested with changing to this, font:14px Courier;, which gave the same width in both Chrome and FF (but might not if you compare with IE or Safari).

A way to have same size on "button/link" cross browser, is to set a size on it.

Demo: http://jsfiddle.net/gd8yy/1/

CSS:

   body {
       background:black;
       width:960px;
   }
   #jsddm a {
       display: inline-block;    /* added - enables setting a width */
       padding:5px 0;            /* adjusted - left/right space is set with individual width */
       font: 16px Calibri;
       text-transform: uppercase;
       text-decoration: none;
       font-weight:bold;
       border: 2px silver outset;
       color: #000000;
       text-shadow:-1px 0 #AAD036, 0 1px #AAD036, 1px 0 #AAD036, 0 -1px #AAD036;
   }
   #one a {
       width: 80px;     /* added */
       background:-webkit-linear-gradient(#FF0000, white 20%, #FF0000 80%);
       background:-moz-linear-gradient(#FF0000, white 20%, #FF0000 80%);
       background:linear-gradient(#FF0000, white 20%, #FF0000 80%);
   }
   #two a {
       width: 125px;     /* added */
       background:-webkit-linear-gradient(#FF00FF, white 20%, #FF00FF 80%);
       background:-moz-linear-gradient(#FF00FF, white 20%, #FF00FF 80%);
       background:linear-gradient(#FF00FF, white 20%, #FF00FF 80%);
   }
   #three a {
       width: 110px;     /* added */
       background:-webkit-linear-gradient(#00FFFF, white 20%, #00FFFF 80%);
       background:-moz-linear-gradient(#00FFFF, white 20%, #00FFFF 80%);
       background:linear-gradient(#00FFFF, white 20%, #00FFFF 80%);
   }
   #four a {
       width: 110px;     /* added */
       background:-webkit-linear-gradient(#00FF00, white 20%, #00FF00 80%);
       background:-moz-linear-gradient(#00FF00, white 20%, #00FF00 80%);
       background:linear-gradient(#00FF00, white 20%, #00FF00 80%);
   }
   #five a {
       width: 145px;     /* added */
       background:-webkit-linear-gradient(#FFFF00, white 20%, #FFFF00 80%);
       background:-moz-linear-gradient(#FFFF00, white 20%, #FFFF00 80%);
       background:linear-gradient(#FFFF00, white 20%, #FFFF00 80%);
   }
   #six a {
       width: 115px;     /* added */
       background:-webkit-linear-gradient(#990099, white 20%, #990099 80%);
       background:-moz-linear-gradient(#990099, white 20%, #990099 80%);
       background:linear-gradient(#990099, white 20%, #990099 80%);
   }
   #seven a {
       width: 135px;     /* added */
       background:-webkit-linear-gradient(#3366FF, white 20%, #3366FF 80%);
       background:-moz-linear-gradient(#3366FF, white 20%, #3366FF 80%);
       background:linear-gradient(#3366FF, white 20%, #3366FF 80%);
   }
   #eight a {
       width: 80px;     /* added */
       background:-webkit-linear-gradient(#FF9900, white 20%, #FF9900 80%);
       background:-moz-linear-gradient(#FF9900, white 20%, #FF9900 80%);
       background:linear-gradient(#FF9900, white 20%, #FF9900 80%);
   }
   #jsddm {
       width: auto;
       height:auto;
       text-align:center;
       margin-left:-42px;
       margin-top:-10px
   }
   #jsddm li {
       text-align:center;
       padding: 0.5px;
       display: inline;
       width:auto;
       height:inherit;
       float: left;
   }
   #jsddm li a:hover {
       color: #AAD036;
       text-shadow:-1px 0 #669933, 0 1px #669933, 1px 0 #669933, 0 -1px #669933;
       font: 16px Calibri;
       padding-top: 6px;
       font-weight: bold;
       padding-bottom: 6px;
   }

Answer 2

Try to use normalize.css or reset.css, both will reset most of the browser default styles.

reset.css : http://meyerweb.com/eric/tools/css/reset/

normalize.css : http://necolas.github.io/normalize.css/

This article explain the differences between both reset files: http://nicolasgallagher.com/about-normalize-css/