homepage Welcome to WebmasterWorld Guest from 54.167.41.199
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Stumped by li a: hover
problems with text underline on mouse hover
breaker




msg:4297638
 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




msg:4297737
 6:17 pm on Apr 14, 2011 (gmt 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.

breaker




msg:4297765
 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved