#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    1
    Rep Power
    0

    Links not responding to css styles


    Im having trouble working out why my links apparently dont want to listen to my css sheet. Is it because of my table layout, or too many classes? Any help is appreciated.

    My css sheet:
    Code:
    body{
    	padding:10px;
    	}
    	
    a:link,a:visited{
    	color:blue;
    	text-decoration:none;
    	}
    
    table.maintable
    	{
    	background-image:url('img/mooning.png');
    	min-width:760px;
    	width:900px;
    	margin-left:auto;
    	margin-right:auto;
    	border:10px;
    	padding:0;
    	border-collapse:collapse;
    	border-radius:10px;
    	}
    	
    .menutree{
    	font-size:10px;
    	}
    
    .menutree a:link,a:visited{
    	color:blue;
    	text-decoration:none;
    	}
    	
    h2{
    	text-align:center;
    	}
    td.topbar{
    	padding:20px;
    	text-align:center;
    	}
    	
    .topbar a:link,a:visited{
    	text-decoration:none;
    	color:black;
    	}
    	
    .topbar a:hover,a:active{
    	text-decoration:none;
    	color:white;
    	}
    	
    .topbar ul {
      text-align: left;
      display: inline;
      margin: 0;
      padding: 5px;
      list-style: none;
    }
    .topbar ul li {
      font-size:12px;
      font-weight:bold;
      display: inline-block;
      position: relative;
      padding: 5px 15px;
      cursor: pointer;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      text-decoration: none;
    }
    
    .topbar ul li:hover {
      background: #555;
      color: #fff;
      
    }
    
    
    
    
    
    
    td.navbar{
    	vertical-align:top;
    	width:150px;
    	color:white;
    	}
    
    table.format{
    	width:730px;
    	background-color:white;
    	margin-right:10px;
    	margin:10px;
    	border:0;
    	padding:10px;
    	font-size:14px;
    	font-family: "Lucida Bright", Georgia, serif;
    	border-radius:6px;
    	}
    	
    td.left
    	{
    	width:15px;
    	vertical-align:top;
    	padding-right:10px;
    	}
    	
    td.middle
    	{
    	width:350px;
    	}
    	
    td.right
    	{
    	width:300px;
    	min-width:200px;
    	vertical-align:top;
    	}
    	
    	
    ul.plus
    	{
    	list-style-type:none;
    	padding:0;
    	margin-top:0;
    	margin-bottom:0;
    	}
    	
    	
    ul.plus li ul{
    	width:300px;
    	min-width:200px;
    	display:none;
    	position:absolute;
    	list-style-type:none;
    	padding:4px;
    	font-size:12px;
    	border-radius:3px;
    	font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    	}	
    
    	
    ul.plus li:hover{
    	cursor:pointer;
    	}
    	
    ul.plus li:hover ul
    	{
    	background-color:#bdbdbd;
    	color:#000000;
    	display:block;
    	cursor:pointer;
    	}
    my html doc
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    
    <link rel="stylesheet" type="text/css" href="styles.css" />
    
    </head>
    
    
    <body>
    <table cellspacing="0" class="maintable">
    <tr>
    <td colspan="2" class="topbar"><img src="img/logo.png" />
    <br/>
    	<ul><li><a href="index.html">Home</a></li>
    		<li><a href="byauthor.html">By Author</a></li>
    		<li><a href="bytitle.html">By Title</a></li>
    		<li><a href="contact.html">Contact</a></li>
    	</ul>
    </td>
    </tr>
    <tr>
    <td class="navbar">hello why isnt this showing up</td>
    
    <td>
    	<table class="format">
    		<tr>
    		<td>
    		<div class="menutree"><a href="index.html">Home</a> > Contact</div>
    	Contact us with any questions at <a href="mailto:mikebarnhouse12@gmail.com">email</a>.<br/>
    	<a href="http://www.yeah.com">yeah</a>
    		</td>
    		</tr>
    	</table>
    </td>
    </tr>
    </table>
    </body>
    
    </html>
    Now in my browser (firefox and chrome), the menu tree stays black, but the test links in the main body (email and "yeah") are blue. Any ideas?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    862
    Rep Power
    275
    you aren't targeting your selectors properly.

    .menutree a:link,a:visited should be .menutree a:link, .menutree a:visited

    .topbar a:link,a:visited should be .topbar a:link, .topbar a:visited

    .topbar a:hover,a:active should be .topbar a:hover, .topbar a:active

IMN logo majestic logo threadwatch logo seochat tools logo