Question

So, I’ve started working out some basics for my portfolio site. I’ve finished the navigation bar, but now when testing cross-browser, it shows a few pixels of margin underneath the navigation. This happens in all browsers except Firefox. Which kinda confuses me, since the elements all have absolute positioning.

HTML:

<div id="topnav">
    <ul>
        <li><a href="index.html" id="current">Home</a></li>
        <li><a href="about.html">About Me</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html" class="lastli">Contact Me</a></li>
    </ul>
</div>

This div is inside a container, which has 800 width, margin 20px top and auto on the sides.
The padding and margin is set to 0. The “top:195” is to position the bar under my header image (which is 800×195). Also note: the list items have a 1×20 background gradient image, that’s set to repeat-x.

CSS:

#topnav {
    width:800px;
    position:absolute;
    top:194px;
    height:20px;
}

#topnav ul {
    list-style-type:none;
    text-align:center;
    height:20px;
    margin:0;
    padding:0;
}

#topnav ul li {
    display:inline;
    font-size:15px;
    line-height:20px;
}

#topnav ul li a {
    padding:0 10px;
    position:relative;
    border-left:1px solid white;
    margin-left:-6px;
}

Note, I have tried setting the height to 20px on several occasions, but none seem to have any effect. I have changed the fonts as well, to no avail.
Screenshots here: https://i.stack.imgur.com/rzU3E.jpg
Top is Firefox (and as I want it to be), bottom is Chrome.
Here’s a JSFiddle: http://jsfiddle.net/SUmF7/

Answer 1

Try adding display: inline-block to your tab element. Both the topnav li and a are set as inline elements, which means they won’t expand to the dimensions you’ve set properly.