I am facing an unusual issue with the rendering of a simple navigation/menu. Below is the code snippet:
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:
Currently, the menu appears perfectly in Firefox fitting the container's size (894px). However, in Chrome and IE11 (and possibly lower versions), one item gets pushed down. It seems like there is not enough space for that particular item (contact) due to the paddings. Adjusting the container width or reducing padding only results in a slight 2px difference between Chrome and Firefox. With a container width of 896px, everything works fine in Chrome, but in IE11, the container width needs to be at least 903px? What could be causing these discrepancies? Perhaps different rendering of the chosen Google font in each browser. How can this issue be resolved?