Sytyling navigation help

HTML & CSS
1

Hi I am trying to style a fixed navigation bar. I am not understanding why ie puts extra pixels on what lines up perfectly in other browsers. I have posted an example on CodePen:
example

2

Hi,

You can never rely on text-size + padding to equal the same dimension cross browser because browsers render text at different height and widths.

Remove the top and bottom padding from the ‘nav a’ rule and apply a line-height to match the height of the bar.

#navigation a {
    display: block;
    background-color: #CCC;
    margin: 0;
    padding:0;
    border: none;
    line-height:50px;
    text-decoration: none;
    text-align: center;
}
3

Thanks so much, your advice worked like a charm! I will read more about this difference in browser text rendering, its a good thing to know about. Thanks

4

Hi, another thing I need to be pointed in the right direction about is this; what should look at if I want to get links to have the length of there text than the same space on each side of the text. Right now mine take up the exact same block size. I like how mine are currently, but I know it will come up again and I would like to know how to control this. Thanks

5

Hi,

If I understand correctly what you are saying then you can’t really have all browsers having the same width plus the same amount of padding on each side because as mentioned before the width of the text varies between browser and platform. Usually it doesn’t matter anyway as long as you leave enough breathing space and don’t try to cram text into containers that are too small or where they can’t wrap.

For a horizontal navigation I tend to use the display:table-cell properties and the elements are distributed across the width as the browser thinks best. (If you want all links to be the same width then you use the table-layout:fixed algorithm but that means your text content should more or less be the same size to start with.

Here is a demo that works well for flexible widths and the method I tend to use (supported in IE8+).

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.nav {
    margin:0 auto;
    padding:0;
    list-style:none;
    display:table;
    width:100%;
    max-width:980px;
    display:table;
    border-collapse:collapse;
}
.nav li {
    display:table-cell;
    vertical-align:top;
    border:1px solid #000;
    text-align:center;
}
.nav a {
    display:block;
    text-decoration:none;
    color:#000;
    background:#f2f2f2;
    line-height:32px;
}
.nav a:hover {
    background:red;
    color:#fff
}
</style>
</head>

<body>
<ul class="nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2 longer</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Another link here</a></li>
        <li><a href="#">Last link</a></li>
</ul>
</body>
</html>

Modern browsers can have finer control if you use flexbox but flexbox is quite complicated to understand so needs to be used carefully.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.