How to work around different padding sizes between browsers

Question

I consider myself a novice at CSS 3 so i'd appreciate any help you can give.

The situation is that i'm creating a dashboard for our test automation suite.

So far i've created a decent looking template, however the navigation bar has a different padding appearance across browsers. In IE and Chrome it looks fine, however in firefox 28 the padding seems to add an extra pixel to the bottom of the nav bar item.

Here is my CSS:

<style type='text/css'>

    html {
            display: table;
            margin: auto;
            overflow-y: scroll;
        }

        body {
            display: table-cell;
            vertical-align: middle;
            font: 10pt Arial, Helvetica, Sans-serif;
            width: 800px;
            margin:0px;
        }

    #contentPane
    {
        background-color:#D5D5D5;
        border-left: 1px solid #752864;
        border-right:1px solid #752864;
        border-bottom:1px solid #752864;
    }

    #logoContainer
    {
        background-color:#FFFFFF;
        height: 60px;
    }

    #logoLeft
    {
        float: left;
    }

    #logoRight
    {
        float: right;
        margin-top: 18px;
        margin-right: 20px;
        font: bold 20px "Arial";
        color: #752864;
    }

    /*navigation link CSS*/

    #nav {
        font-weight:bold;
        margin-bottom:20px;
        text-align: center;
        width: 800px;
        background-color:#752864;
        height: auto;
    }
    #nav ul {
            height: auto;
            padding-top: 10px;
            padding-bottom: 10px;
            margin: 0px;
    }
    #nav li {
        display: inline;
    }

    #nav li a {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-decoration: none;
        color: #FFFFFF;
        background-color:#752864;
        font-family: 'Verdana', 'Lucida Grande', Sans-Serif;
    }

    #nav li a:hover {
        color: #752864;
        background-color: #FFFFFF; 
    }   

    #testtitle
    {
        padding-left: 10px;
    }

    /*table CSS*/

    #gradient-style
    {
        font-family: 'Verdana', 'Lucida Grande', Sans-Serif;
        font-size: 12px;
        width: 800px;
        text-align: left;
        border-collapse: collapse;
    }

    #gradient-style th
    {
        font-size: 13px;
        font-weight: bold;
        padding: 8px;
        background: #752864 url('table-images/gradhead.png') repeat-x;
        border-bottom: 1px solid #752864;
        color: #FFFFFF;
    }

    #gradient-style td
    {
        padding: 8px; 
        border-bottom: 1px solid #752864;
        border-left: 1px solid #752864;
        color: #000000;
        border-top: 1px solid #752864;
        background: #D5D5D5 url('table-images/gradback.png') repeat-x;
    }
    .imagecontainer{

        text-align: center;
        border-left: 0px !important;
    }

    #gradient-style tbody tr td.passcell
    {
        padding: 8px; 
        border-bottom: 1px solid #752864;
        border-left: 1px solid #752864;
        color: #FFFFFF;
        border-top: 1px solid #752864;
        background: #199A19  url('table-images/gradback.png') repeat-x;
    }

    #gradient-style tbody tr td.failcell
    {
        padding: 8px; 
        border-bottom: 1px solid #752864;
        border-left: 1px solid #752864;
        color: #FFFFFF;
        border-top: 1px solid #752864;
        background: #FF3333  url('table-images/gradback.png') repeat-x;
    }
    #gradient-style tbody tr td.warningcell
    {
        padding: 8px; 
        border-bottom: 1px solid #752864;
        border-left: 1px solid #752864;
        color: #FFFFFF;
        border-top: 1px solid #752864;
        background: #FF6600  url('table-images/gradback.png') repeat-x;
    }

    #gradient-style tfoot tr td
    {
        background: #e8edff;
        font-size: 12px;
        color: #99c;
    }

    #gradient-style tbody tr:hover td
    {
        background: #005ECF url('table-images/gradhover.png') ;
        color: #FFFFFF;
    }       

    a {
        text-decoration: none;
    }

    #ExpandAllElements{
        float: bottom;
    }
    .expand_all {
        cursor: pointer;
    }
    .collapse_all {
        cursor: pointer;
    }
    .expandCollapse_Collapsed{
        cursor: pointer;
        font-weight: bold;
        color: white;
        display: block;
        padding: 5px 2px 5px 22px;
        width: 150px;
        background: #005ECF
        url('images/expand.gif') no-repeat 5px 50%;
        margin-left: 10px;
    }
    .expandCollapse_Expanded{
        url('images/collapse.gif') no-repeat 5px 50%;
    }

    /*SubTest CSS*/

    #body_log
   {
       word-wrap: break-word;
   }


</style>

Here is my HTML:

<a name = 'top'> </a>
<div id='contentPane'>

<div id='logoContainer'>
    <img  id='logoLeft' src='images/CPULogof.gif'/>
    <div id='logoRight'>Bristol Automation</div>
</div>
<div id='nav'> 
    <ul>
        <li>
            <a href='' target='_blank'>Global Automation Hub</a>
        </li>
        <li>
            <a href='' target='_blank'>UK Automation</a>
        </li>
        <li>
             <a href='' target='_blank'>UK QA Home</a>
        </li>
    </ul>
</div>

<table id='gradient-style' summary='Test Results'>
    <thead>
        <tr>
            <th scope='col'  colspan='3'>Automated Test Finished</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='imagecontainer' rowspan='8'>
                <img height='100' width='100' src='images/AutoTestCogf.png'/>
            </td>
        </tr>
        <tr>
            <td rowspan='2'>Test Name: Agent_Registration_TestClass</td>
        </tr>
        <tr>
            <td class='gradient-style td passcell' rowspan='1'>Result Status: Pass</td>
        </tr>
        <tr>
            <td rowspan='2'>Start Time: 12:24</td>
        </tr>
        <tr>
            <td rowspan='1'>EndTime: 12:25</td>
        </tr>
                <tr>
            <td colspan='2'  rowspan='1'>Elapsed Time: 0 Seconds</td>
        </tr>
        <tr>
            <td rowspan='2'>Run by: JohnN</td>
        </tr>
        <tr>
            <td rowspan='1'>Machine: BRSL1960</td>
        </tr>
    </tbody>
</table>

<div id='testtitle'>
    <p><font face='Verdana'><h2><b><font color='black'>Test Results For: Agent_Registration_TestClass</font></b></h2></font></p>
</div>

<div><a id='expandAllBoxes' class='expandCollapse_Collapsed'>Expand/Collapse All</a>   </div>
<br>
</div>

<div>
 <a href= '#top'> Up to Top ^^ </a>
 <p>TestResults v0.85 written by Bristol Automation Team
 <a href='' target='_blank'>Click here to visit our sharepoint!</a></p>
</div>

I understand that I can use some css to detect if the browser is firefox and change the padding based on that, but that didnt seem to work. From what I can see the following block of code is where the issue is:

    #nav li a {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-decoration: none;
        color: #FFFFFF;
        background-color:#752864;
        font-family: 'Verdana', 'Lucida Grande', Sans-Serif;
    }

Any help would be much appreciated. Cheers.

UPDATE

Here is the JS fiddle http://jsfiddle.net/Vwr3x/

Answer 1

You need to add css reset or normalize.css to neutralize browser default styling

reset.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Normalize.css

Add either of these two at the beginning in your style.css file.

Answer 2

You need to use browser specific CSS to get accurate results on all browsers. I mean not for all but the one you are getting wrong, use mozilla, internet explorer or google chrome specific css.

Answer 3

if you want I have a jQuery script to detect all the navigators, then the script add a class to a body with the name of the browser.