...

View Full Version : inconsistent CSS hover ...



noah way
07-01-2011, 08:20 PM
With a list menu, CSS hover doesn't work on one item (CONTACT) and I can't figure out why. Maybe something to do with the hexadecimal obfuscation?

It works with on mouseover but that defeats the purpose of CSS ...

All comments and suggestions welcome - thanks! URL here (http://www.milesjaffe.com/testj2/index.html)

HTML

<div id="menu">
<ul>
<li>MILES JAFFE</li>
<li><a href="architecture/architecture.html">ARCHITECTURE</a></li>
<li><a href="furniture/tables.html">FURNITURE</a></li>
<li><a href="art/sculpture.html">ART</a></li>
<li><a href="media.html">MEDIA</a></li>
<li><a href='mailto:m.%6A%61ff%65@%6D%69lesjaff%65.co%6D'>CONTACT</a></li>
<!-- doesn't change on hover -->

<li><a onMouseOver="this.style.color = '#ffffff';" onMouseOut="this.style.color = '#888888';" href='mailto:m.%6A%61ff%65@%6D%69lesjaff%65.co%6D'>CONTACT</a></li>
<!-- does change on hover -->

</ul>
</div>


CSS

body {background-color:#333333;color:#666666;font-family: Arial, Helvetica, sans-serif;color:#999999;}
table,td {
padding-right:10px;padding-left:10px;
border-style:solid;border-width:0px;
font-size:16px;text-align:right;color:#bbbbbb;text-align:right;
}
ul {margin-left:10px;margin-right:10px;list-style-type:none;font-size:17pt;}
li {font-weight:bold;font-style:normal;color:#cccccc;}

body a:link,a:visited,a:active {outline:none;text-decoration:none;color:#888888;}
.style1:link {text-decoration:none;color:#bbbbbb;}
.style1:hover {text-decoration:underline;color:#ffffff;}
a:hover {text-decoration:none;color:#ffffff;}

#logo {position:absolute;top:437px;left:25px;}
#menu {position:absolute;top:22px;left:-5px;}
#tcontent {position:absolute;top:50px;left:380px;}
#back {position:fixed;bottom:10;right:25;}
img {border:0;}
.tbox {height:500px;width:500px;font-size:11pt;text-align:left;}
.tboxb {height:500px;width:570px;font-size:11pt;text-align:left;}
.tboxw {height:500px;width:740px;font-size:11pt;text-align:left;}
.tboxn {height:500px;width:400px;font-size:11pt;text-align:left;}
.it {font-size:10pt;font-style:italic;color:#ffffff;}

Apostropartheid
07-01-2011, 09:04 PM
I believe you're messing with the specificity.

Try doing it normally:


a {
outline: none;
text-decoration: none;
color: #888;
}
a:hover {
color: #fff;
}

Delete anything else relating to links and this should work.

noah way
07-01-2011, 09:53 PM
Nailed it, thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum