Gap in Firefox but not in IE

Question

I am brand new to CSS, and am using Dreamweaver cs6. I have a gap between my menu buttons and main content in Firefox but not in ie. Any advice would be greatly appreciated. I can fill the gap in Firefox, but then I get an overlap in IE. I am trying to get them to be flush.

enter image description here

Here is my html code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<style type="text/css">
body {
    background-color: #06F;
    background-image: url(Images/Website_Images/Banners/bg-banner-blue.png);
}
#header {
    background-repeat: no-repeat;
    background-position: center;
    height: 40px;
    z-index: 1;
    position: relative;
    top: 0px;
    padding: 0px;
    margin: 0px;
    clear: both;
    float: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    width: auto;
}
</style>
<link href="Main_MenuCSS.css" rel="stylesheet" type="text/css" />
<link href="Main_BodyCSS.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"></div>

<div id="Navbar">
<div id="holder">

<ul>
<li><a href="index.html" id="onlink">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</div><!-- end holder -->
</div><!-- end navbar -->
<div id="body">Main Body Here</div>
<div id="footer">Footer Here</div>
</body>
</html>

Here is my css:

#Navbar {
    width: 760px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;

}

#Navbar #holder {
    height:64px;
    border-bottom:1px solid #000;
    width: 755px;
    padding-left:25px;

}

#Navbar #holder ul {
    list-style:none;
    margin:0;
    padding:0;
}

#Navbar #holder ul li a {
    text-decoration: none;
    float: left;
    margin-right: 5px;

    font-family: "Arial Black", Gadget, sans-serif;
    color: #FFF;
    border: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 20px;
    width: 100px;
    text-align: center;
    display: block;
    background: #69f;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

}

#Navbar #holder ul li a:hover {
    background:#F90;
    color:FFF;
    text-shadow:1px 1px 1px #000;

}

#holder ul li a#onlink{
    background: #fff;
    color: #000;
    border-bottom: 1px solid #FFF;
}

#holder ul li a#onlink:hover {
        background:#FFF;
        color:#69F;
        text-shadow:1px 1px 1px #000;

}

I made a fiddle for this here: https://jsfiddle.net/clovola/xx5jyq6b/ . You can fix it in FireFox by reducing the height of `#holder`. That will probably break it in IE though :) — clovola, Oct 17 '15 at 15:13
@cpdproxy: It would be helpful to mention the Firefox and IE versions you are testing with. — Whirl Mind, Oct 17 '15 at 15:16

score 0 · Accepted Answer · answered Oct 17 '15 at 19:33

The problem seems to be a mismatch in rendered height between Firefox (20px) and Internet Explorer (22.56px).

Explicitly defining the line-height of the text will ensure all browsers render the same heights for the menu buttons:

#Navbar #holder ul li a {
    line-height: 23px;
}

I've tested this in Firefox 41 and Internet Explorer 11 and the heights look identical.

@clovola's jsfiddle with the extra line of CSS: https://jsfiddle.net/xx5jyq6b/2/

score 0 · Answer 2 · edited May 23 '17 at 12:23

The core problem here is that the IE and Firefox are using different fonts to render the text in the menus.

The height of the tabs is not fixed, so it is determined by the height of the font, but the height of the container div is fixed (at 64px). It is the difference in height between the two fonts that is causing the gap to appear.

Whether you want to fix the font issue is up to you. However the first thing to do is change the container box so that it doesn't need a fixed size, and just lines itself up to however big the tabs are. This will make things a lot easier for you for any future changes you may make.

The first step is to remove the fixed height from #Navbar #holder.

This will trigger the bottom border of your tabset to jump to the top. Not what you want. You can fix that by adding a new line to the same part of the CSS code as follows:

display: inline-block;

Your tabs will now display correctly in all browsers.

You still have the issue of different fonts in different browsers.

The problem here is that you're using Arial Black as your font. But there is a known bug in Firefox which causes this to be displayed incorrectly.

You can find out more about this bug and how to work around it here: Is there a trick to show Arial Black in Firefox?

Hopefully that will be enough to get your site looking roughly the same in all browsers.

score 0 · Answer 3 · answered Oct 18 '15 at 14:04

Thank you for the quick answers, I tried spudleys first, and it did remove the gap however the black line remained between the buttons and the main content which prevented it looking like tabs.

I then tried Ryans answer, and it was working the way I would like.

#Navbar #holder ul li a {
    line-height: 23px;
}

Thank you for your help guys. I will also look into changing the fonts so that they match in different browsers.

Gap in Firefox but not in IE

3 Answers3