CSS Menu (Can't get the tabs to full height)

Question

<style type="text/css">
html, body {
    background: #fff;
    margin: 0;
    padding: 0;
}

#nav {
    font-family: Verdana, sans-serif;
    height: 29px;
    font-size: 12px;
    padding: 0 0 0 10px; /* this is used for something else */
    background-color: #456;
}

#nav ul, #nav ul li {
    list-style: none;
    margin: 0;
    padding: 9px 0 0 0px;
}

#nav ul {
    text-align: center;
}

#nav ul li {
    display: inline;
}

#nav ul li.last {
    margin-right: 0;
}


#nav ul li a {
    color: #FFF;
    text-decoration: none;
    padding: 0px 0 0 20px;
    height: 29px;
}
#nav ul li a span {
    padding: 8px 20px 0 0;
    height: 21px;
}

#nav ul li a:hover {
    background: #789;
}
</style>

<div id="nav">
    <ul>
    <li><a href="/1/"><span>One</span></a></li>
    <li><a href="/2/"><span>Two</span></a></li>
    <li><a href="/3/"><span>Three</span></a></li>
    <li><a href="/4/"><span>Four</span></a></li>
    </ul>
</div>

I have a little problem with that, as it doesn't make the "hover background" 100% of the height of the nav bar.

Answer 1

This works on my machine:

<style type="text/css">
html, body {
    background: #fff;
    margin: 0;
    padding: 0;
}

#nav {
    font-family: Verdana, sans-serif;
    height: 29px;
    font-size: 12px;
    padding: 0 0 0 10px; /* this is used for something else */
    background-color: #456;
}

#nav ul, #nav ul li {
    list-style: none;
    margin: 0;
    padding: 0 0 0 0px;
}

#nav ul {
    text-align: center;
    position:relative;
    width:300px;
    margin:0 auto 0 auto;
}

#nav ul li {
    float:left;
}

#nav ul li.last {
    margin-right: 0;
}


#nav ul li a {
    float:left;
    color: #FFF;
    text-decoration: none;
    padding: 9px 0 0 20px;
    height: 20px;

}
#nav ul li a span {
    padding: 8px 20px 0 0;
    height: 20px;
}

#nav ul li a:hover {
    background: #789;
}
</style>

Answer 2

Don't set the height on the outermost element. Set it on the innermost element (will require a display:block on your a-rule in addition to the height).

Answer 3

You should put your padding and line-height on the a tag. The spans are not needed, and you also don't really need any padding in the li either. If the user changes the text size, the hover backgrounds come out of the tabe area though.

<style type="text/css">
html, body {
    background: #fff;
    margin: 0;
    padding: 0;
}

#nav {
    font-family: Verdana, sans-serif;
    height: 29px;
    font-size: 12px;
    padding: 0 0 0 10px; /* this is used for something else */
    background-color: #456;
}

#nav ul, #nav ul li {
    list-style: none;
    margin: 0;
    padding: 0px;
}

#nav ul {
    text-align: center;
}

#nav ul li {
    display: inline;
}

#nav ul li.last {
    margin-right: 0;
}


#nav ul li a {
    color: #FFF;
    text-decoration: none;
    padding: 8px 20px 7px 20px;
    line-height:29px;
}

#nav ul li a:hover {
    background-color: #789;
}
</style>

<div id="nav">
    <ul>
    <li><a href="/1/">One</a></li>
    <li><a href="/2/">Two</a></li>
    <li><a href="/3/">Three</a></li>
    <li><a href="/4/">Four</a></li>
    </ul>
</div>

Answer 4

have you tried:

#nav ul li a {
    color: #FFF;
    text-decoration: none;
    padding: 0px 0 0 20px;
    height: 29px;
    line-height: 29px;
}