homepage Welcome to WebmasterWorld Guest from 54.204.127.59
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
problems with :hover & text-decoration:none
Makaveli2007




msg:3595316
 11:10 pm on Mar 8, 2008 (gmt 0)

Hi everyone,

I'm using this CSS code:

.menu li {
list-style:none;
display:block;
padding:3px;
margin-bottom:3px;
}

.menu li a{
font-weight:bold;
text-decoration:none;
}

.menu li a:hover {
text-decoration:overline;font-style:italic;
}

however I can't get the underline-effect for the links to dissappear when the cursor is above them (which I'm trying to do with ...a:hover {text-decoration:none;}). How come this isn't working?

Additional information:

The underline effect is gone when I'm not moving over it with the mouse cursor & using something such as text-decoration:overline doesn't show any effects, either...

I'll appreciate any suggestions! thanks!

[edited by: SuzyUK at 11:22 am (utc) on Mar. 10, 2008]
[edit reason] disabled smileys for code [/edit]

 

MarkFilipak




msg:3595331
 11:32 pm on Mar 8, 2008 (gmt 0)

I tested the following in IE6, FF2, OP9, & SA3. Works as expected.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"/>
<html>
<meta http-equiv = 'Content-Type' content = 'text/html; charset = ISO-8859-1'>
<meta http-equiv = 'Content-Language' content = 'en'>
<meta http-equiv = 'Content-Script-Type' content = 'text/javascript'>
<meta http-equiv = 'Content-Style-Type' content = 'text/css'>
<meta http-equiv = 'Expires' content = 'Thu, 01 Jan 1970 00:00:00 GMT'>
<meta http-equiv = 'Pragma' content = 'no-cache'>
<meta http-equiv = 'Cache-Control' content = 'no-cache'>
<style>
.menu li {list-style:none;display:block;padding:3px;margin-bottom:3px;}
.menu li a{font-weight:bold;text-decoration:none;}
.menu li a:hover {text-decoration:overline;font-style:italic;}
</style>
</head>
<body>
<div class='menu'>
<ul>
<li><a href='#'>this</a> is a link.</li>
<li><a href='#'>this</a> is a link.</li>
<li><a href='#'>this</a> is a link.</li>
</ul>
</div>
</body>
</html>

[edited by: SuzyUK at 11:24 am (utc) on Mar. 10, 2008]
[edit reason] removed smileys from code [/edit]

Makaveli2007




msg:3595683
 5:04 pm on Mar 9, 2008 (gmt 0)

hm thanks for testing it. Unfortunately it isn't working for me..then again I'm not sure if I even want to remove the underline effect when the cursors is above it, but then again it bothers me that I don't know why it's not working hehe.

MarkFilipak




msg:3595999
 5:07 am on Mar 10, 2008 (gmt 0)

In what browser does it fail?

Makaveli2007




msg:3596382
 3:53 pm on Mar 10, 2008 (gmt 0)

Doesn't seem to be a browser related problem. I'm not sure which versions I have (and not sure where to look it up right now..beginner here..), but I tried it in IE and Firefox and my computer is fairly new (the firefox version is the one that was the latest version less than a year ago)

pageoneresults




msg:3596401
 4:09 pm on Mar 10, 2008 (gmt 0)

Is it possible that you have other CSS that is overriding the example provided? Maybe a conflict somewhere? Did you validate your CSS?

CSS Validator
[jigsaw.w3.org...]

MarkFilipak




msg:3596555
 6:26 pm on Mar 10, 2008 (gmt 0)

P.l.e.a.s.e...Makaveli2007

Copy-paste my code into a test.html, open it in your browser, and see if it does what you want. Don't take what I post and use it to modify your code and then say, "It doesn't work."

Makaveli2007




msg:3596945
 12:19 am on Mar 11, 2008 (gmt 0)

I'm sorry Mark, I was busy when I was reading your suggestion and didn't take it as a suggestion for my website. Thanks for the effort! Unfortunately I'm about to leave again right now (I don't have an internet connection for my own computer at the moment, because I just moved out of my parents' house..), but I'll try your code out. Thanks again!

@pageoneresults: I'll give your suggestions a try, too (trying to validate my CSS..I don't think there was any overriding effect, though (checked that already)).

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