[Design with CSS 2632] RES: [Design with CSS 2630] background-color a:hover horizontal nav problems

Mon, 09 Nov 2009 03:10:17 -0800 

I've Just tried the code you posted, and everything goes fine. The contento
f the <li>s is not pushed Bellow, Just changes it's color and
background-color. 
So, you've missed to post something that is making it renders wrong, or your
HTML and CSS are invalid (what could make a browser render it badly).

First of all, make sure your HTML and CSS are valid, and then, IF the
problem persists, paste us the entire HTML and CSS.

-----Mensagem original-----
De: [email protected] [mailto:[email protected]] Em nome
de neridaj
Enviada em: sexta-feira, 6 de novembro de 2009 00:51
Para: Design the Web with CSS
Assunto: [Design with CSS 2630] background-color a:hover horizontal nav
problems


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 because you are subscribed to the "Design the Web with CSS" 
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---

Reply via email to