Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    inconsistent CSS hover ...

    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

    HTML
    Code:
     
    <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
    Code:
     
    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;}

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I believe you're messing with the specificity.

    Try doing it normally:
    Code:
    a {
      outline: none;
      text-decoration: none;
      color: #888;
    }
    a:hover {
      color: #fff;
    }
    Delete anything else relating to links and this should work.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Nailed it, thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •