Welcome to WebmasterWorld Guest from 54.226.67.166

Forum Moderators: not2easy

Message Too Old, No Replies

Stumped by li a: hover

problems with text underline on mouse hover

     

breaker

4:11 pm on Apr 14, 2011 (gmt 0)



So I've been trying initiate the hover psuedo class for links on my nav-bar. The code looks fine, so I'm thinking this issue may have to do with my using HTML5. I'd LOVE some help. Thanks. Here's the HTML and the CSS i'm using to style it.

<nav>
<ul>
<li><a href="/studio.html">studio</a></li>
<li><a href="/services.html">services</a></li>
<li><a href="/portfolio.html">portfolio</a></li>
<li><a href="/contact.html">contact</a></li>
</ul>
</nav>

CSS:

nav {
background-image: url(../images/backgrounds/nav_bg.png);
height: 40px;
background-repeat: no-repeat;
display: block;
}

ul{
font-family: Tahoma, Geneva, sans-serif;
margin: 0px;
padding-left: 265px;
font-size:18px;
line-height: 40px;
white-space: nowrap;
}

li{
list-style: none;
display: inline;
}

li a{
text-decoration: none;
color: #ccccbb;
padding: 7px 35px;
}

li a: hover{
text-decoration: underline;
color : #ccccbb;

}

rocknbil

6:17 pm on Apr 14, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome aboard breaker. I thought this at first, then validated an html 5 doc to verify it. You're going to laugh.

Take the space out in a: hover.

:-)

The pseudo class selector is not like setting rules, spaces mean something different in a selector. My **guess** is it's parsed as an anchor pseudo class

a:

with no name (null)

which contains some element tag "hover". Like this

#container h1 a

means an element with the id of container, containing an h1, inside which there is an anchor.

The W3C CSS Validator [jigsaw.w3.org] probably would have alerted you to this too.

breaker

6:45 pm on Apr 14, 2011 (gmt 0)



Yup! You nailed it, rocknbil. Thanks a ton! And I will familiarize myself with jigsaw.w3.org. Thanks again!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month