I have been scouring numerous articles in search of a solution to this problem, but unfortunately, I haven't had any luck so far. I'm wondering if there's a fix for this issue that I may be missing on our company website.
Problem: I develop websites using FireFox and after completing the beta version of the site, I encountered a bug when viewing it in Chrome. The problem is that the navigation bar appears shorter in Chrome & IE compared to how it looks in FF and Safari. Below you'll find the HTML and CSS code for this section. By clicking on the image link, you can see the differences in display. Thank you in advance for any help!
CSS
.navigation {
min-height: 50px;
}
.navigation .navbar {
border: none;
margin-bottom: 0;
min-height: 50px;
}
.navigation .navbar .navbar-brand {
color: #fff;
font-size: 40px;
font-weight: 700;
height: 70px;
line-height: 35px;
}
.navigation .navbar-default {
background-color: #0091D5;
box-shadow: 0 0px 10px rgba(0,0,0,.2);
border: none;
border-radius: 0;
clear: both;
}
.navigation .navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 700;
padding-top: 15px;
padding-bottom: 15px;
}
.navigation .navbar-default .navbar-nav>li>a:hover,
.navigation .navbar-default .navbar-nav>.active>a,
.navigation .navbar-default .navbar-nav>.active>a:hover,
.navigation .navbar-default .navbar-nav>.active>a:focus {
background: #FF7200;
color: #FFFFFF;
}
.navigation .btn-default:hover,
.navigation .btn-default:focus,
.navigation .btn-default:active,
.navigation .btn-default.active {
border-color: transparent;
}
HTML
<section id="menu">
<div class="navigation">
<div id="main-nav" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- end .navbar-header -->
<div class="navbar-collapse collapse">
<ul id="ulnav" class="nav navbar-nav">
<li> </li>
<li><a href="index.html" target="_parent"> Home</a></li>
<li><a href="water-damage.html" target="_parent">Water Damage</a></li>
<li><a href="fire-damage.html" target="_parent">Fire</a></li>
<li><a href="drying-services.html" target="_parent">Drying Services</a></li>
<li><a href="restoration.html" target="_parent">Restoration</a></li>
<li><a href="commercial.html" target="_parent">Commercial</a></li>
<li><a href="reviews.html" target="_parent">Reviews</a></li>
<li><a href="insurance-financing.html" target="_parent">Insurance & Financing</a></li>
<li><a href="about.html" target="_parent">About</a></li>
<li class="cwaf-bg"><a href="free-estimate.html" target="_parent">Free Estimate</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>