[BP #3531] background-color a:hover horizontal nav problems

[neridaj]

I'm having issues with a horizontal nav, using blueprint css, where
the change in background-color on a:hover is pushing all the content
down. If I leave the background-color the same on a:hover the problem
is fixed.

CSS:
<code>
#header-nav {
        position:relative;
        padding-top:31px;
        /*left:-10px;*/
        width:480px;
        margin-right:0;
        float:right;

}

#header-nav li {
        display:inline;
}

#header-nav a, #header-nav a:link, #header-nav a:visited {
        -moz-border-radius:5px;
        -webkit-border-radius: 5px;
        background-color:#00242F;
        color:#B9BBAC;
        font-family:DIN-Bold,'Helvetica Neue',Arial,sans-serif;
        font-size:11px;
        font-weight:bold;
        padding-left:10px;
        /*left: -10px;*/
        text-transform:uppercase;
        display:block;
        float:left;
        width:70px;
}

#header-nav a:hover, #header-nav a:focus {
        background-color:#00242F; /* PUSHES ALL CONTENT BELOW DOWN */
        color:#F0F2DF;
}
</code>

HTML:
<code>
<div id="header-wrapper">
    <div class="container showgrid">
        <div class="span-9 prepend-1 first">
            <h1 id="logo"><a href="/">blah</a></h1>
        </div>
        <div class="span-13 append-1 last">
            <ul id="header-nav">
                    <li><a href="blog">Blog</a></li>
                    <li><a href="sites">Sites</a></li>
                    <li><a href="scraps">Scraps</a></li>
                    <li><a href="links">Links</a></li>
                    <li><a href="about">About</a></li>
                    <li><a href="contact">Contact</a></li>
                </ul>
        </div>
    </div>
</div>
</code>

--

You received this message because you are subscribed to the Google Groups 
"Blueprint CSS" group.
To post to this group, send email to blueprint...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/blueprintcss?hl=.