Navigation items padding: Firefox vs. Chrome&IE11

Question

I got strange problem with different rendering of one simple nav/menu. Here is code:

HTML:

<nav id="navigation">
<ul>
<li class="active"><a  href="http://bybyweb.com/hygeineco/">HOME<br><span>What we do</span></a></li>
<li><a href="http://bybyweb.com/hygeineco/about">ABOUT<br> <span>Our expertise</span></a></li>
<li><a href="http://bybyweb.com/hygeineco/services">SERVICES<br><span>Our products</span></a></li>
<li><a href="http://bybyweb.com/hygeineco/why">WHY CHOOSE US<br><span>Our promise</span></a></li>
<li><a href="http://bybyweb.com/hygeineco/news">NEWS<br><span>Updates</span></a></li>
<li><a href="http://bybyweb.com/hygeineco/charity">OUR CHOSEN CHARITY<br><span>Great Ormond Street</span> </a></li>
 <li><a href="http://bybyweb.com/hygeineco/contact">CONTACT US<br><span>Get in touch</span> </a></li>

</ul>
</nav>

Relevant CSS:

#navigation {
    width:100%;
    clear:both;
    background-color:#a9218e;
    height:72px;

}

#navigation ul {
    width:894px;
    height:72px;
    list-style-type:none;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
}

#navigation ul li {
    display:block;
    float:left;
    text-align:center;
    padding:10px 22px 0 22px;
    margin:0;
    height:72px;
    box-sizing:border-box;

}
#navigation ul li:last-child {
    padding:10px 20px 0 19px;
}

#navigation ul li a {
    color:#fff;
    text-decoration:none;


    width:100%;
    height:72px;
    font-size:15px;
    font-weight:400;
}

#navigation ul li.active {
    background-color:#00837e;
}

Test link: http://bybyweb.com/hygeineco/

Well... In Firefox, menu is perfect, it fits container's size (894px). However, in Chrome and IE11 (and i guess lower IE versions), one item is pushed down. So, i guess that there is no space for that item (contact) because of paddings. I've tried to resize container, or to reduce padding, and rendering difference is ~2px, between Chrome and Firefox... With container width of 896px - all is working fine in Chrome, in IE11, anyway, container width should be at least 903px?! What causes these strange differences? I guess that chosen google font rendering is different in every browser. How to solve this issue?

Answer 1

Add This Code Where Ever You Used box-sizing:border-box; :

box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;

-webkit- is for Safari And Chrome

-moz- is for Mozila (but in your case , the browser could understand it without -moz- )

-o- for Opera and -ms- for IE ;

Answer 2

Almost solved it by using display:table for ul, and display:table-cell for li elements... However, now i just have to remove margin/padding at the bottom.... :)

EDIT: background image position was in question... so, now is perfect. Good old tables - still the best solution for some things. :)

EDIT2: I would remove this question, but i am sure it will help to someone who have similar situation. Conclusion -> when you have menu with different widths of/for every menu item, BUT if you want to place that menu inside fixed width container, setting of right/left padding to li elements (menu items) is obviously not the best solution. Display: table, and display:table-cell is the best (and maybe only?) possible solution.