How come the menus look different in Firefox compared to Chrome, Safari, and IE? I've tried adjusting the CSS but can't seem to get it just right. Any suggestions on how to fix this?
In Firefox, there's an overlapping part at the bottom of the blue area that I want to remove.
In Chrome, Safari, and IE:
CSS:
.menuContainer
{
height: 60px;
width: 100%;
background: #C9C9C9;
}
.mainMenu
{
margin: 0 auto;
width: 60%;
}
.mainMenu nav
{
margin: 15px 0 0 0;
padding: 0;
height: 40px;
float: left;
background: #C9C9C9;
}
.mainMenu nav ul
{
list-style: none;
padding-left: 0px;
margin: 0;
}
.mainMenu nav ul li
{
float: left;
display: inline;
}
.mainMenu nav ul li a
{
color: #fff;
display: inline;
padding: 19px 10px 19px 10px;
margin: 0 20px 0 0;
font-family: 'Montserrat',serif;
font-size: 18px;
font-weight: 700;
}
/* highlight menu alt 1 */
body#hem a#hem-link,
body#karta a#karta-link,
body#byggnad a#byggnad-link,
body#byggnader a#byggnader-link,
body#tips a#tips-link,
body#info a#info-link,
body#omguiden a#omguiden-link,
body#kopenhamn a#kopenhamn-link {
background: #00B4FF;
}
HTML:
<div class="menuContainer">
<div class="mainMenu">
<nav>
<ul>
<li><a id="hem-link" href="?p=hem">Hem</a></li>
<li><a id="kopenhamn-link" href="?p=kopenhamn">Köpenhamn</a></li>
<li><a id="karta-link" href="?p=karta">Karta</a></li>
<li><a id="byggnader-link" href="?p=byggnader">Bilder</a></li>
<li><a id="tips-link" href="?p=tips">Tips</a></li>
<li><a id="omguiden-link" href="?p=om-guiden">Om guiden</a></li>
</ul>
</nav>
</div>
</div>