Меню CSS (не удается вывести вкладки на полную высоту)

ты пробовала:

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

Не устанавливайте высоту самого внешнего элемента. Установите его на самый внутренний элемент (в дополнение к высоте потребуется display: block на вашем a-rule).

Это работает на моей машине:

<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>

Вы должны указать отступ и высоту строки в теге а. Промежутки не нужны, да и отступы в li тоже не нужны. Если пользователь изменяет размер текста, фон при наведении курсора выходит из области табе.

<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>