Welcome to WebmasterWorld Guest from 54.234.38.8

Forum Moderators: not2easy

Message Too Old, No Replies

Stumped by li a: hover

problems with text underline on mouse hover

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

New User

joined:Apr 14, 2011
posts: 4
votes: 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;

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

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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.
6:45 pm on Apr 14, 2011 (gmt 0)

New User

joined:Apr 14, 2011
posts: 4
votes: 0


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