Bulletproof Web Design

When I add the 1px image at the bottom of the ul, it gets hidden behind the tabs. The author says that it should show through them. Then, when I add the hover style that increases the padding on the bottom of the active tab, the whole ul expands by 1px.

Is this happening to anyone else? I've checked in Firefox 3.6, Chrome 4 and IE 8 and have the same result. Maybe I'm doing it wrong?

Code below:

        Chapter Two: Scalable Navigation

            body{
                font-size: small;
            }

            #nav {
                margin: 0;
                padding: 10px 0 0 46px;
                list-style: none;
                background: #FFCB2D url(listbottomborder.png) repeat-x bottom left;
                float:left;
                width: 720px;
            }

            #nav li {
                float: left;
                margin: 0 1px 0 0;
                padding: 0;
                font-family: "Lucida Grande", sans-serif;
                font-size: 80%;
            }

            #nav a {
                float: left;
                display: block;
                margin: 0;
                padding: 4px 8px;
                color: #333;
                text-decoration: none;
                border: 1px solid #9B8748;
                border-bottom: none;
                background:  #F9E9A9 url("bginactive.png") repeat-x top left;
            }

            #nav a:hover {
                color: #333;
                padding-bottom: 5px;
                border-color: #727377;
                background: #fff url("bgactive.png") repeat-x top left;
            }

            Introduction
            About Lance
            News & Events
            Sponsors

You must log in to comment.