CSS Links hate me!!

**Doomtomb** · 02-20-2006, 11:10 PM

I've tried everything!!

How come this link won't be stylish?!

Code:

<html>
<head>
<title></title> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css">

	a.button:link		{ color: #CBA300; display: block; padding: 1px; }
	a.button:visited 	{ color: #CBA300; display: block; padding: 1px; }
	a.button:hover		{ color: #ffffff; background-color: #565553; display: block; padding: 1px;}
	a.button:active 	{ color: #FFFFFF; display: block; padding: 1px; }
</style>
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
<STYLE TYPE="text/css"> //add this into the other style sheet
BODY{
SCROLLBAR-FACE-COLOR: #333333; SCROLLBAR-HIGHLIGHT-COLOR: #555555; SCROLLBAR-SHADOW-COLOR: #111111; SCROLLBAR-3DLIGHT-COLOR: #111111; SCROLLBAR-ARROW-COLOR: #999999; SCROLLBAR-TRACK-COLOR: #000000; SCROLLBAR-DARKSHADOW-COLOR: #111111 
</STYLE>

<script language="JavaScript" src = "/shared/wow-com/includes-client/wow.js;jsessionid=AF749CF39BF1CE68AB6775357D9FBF54.08_app03"></script>
<script language="JavaScript" src = "/shared/wow-com/includes-client/detection.js;jsessionid=AF749CF39BF1CE68AB6775357D9FBF54.08_app03"></script>
</head>
<body>
<?php include "header.php"; ?>
<?php include "navigation.php"; ?>
<?php include "begin-content.php"; ?>    
   <!--MAIN-->    
    <table cellspacing="0" width="100%" class='tableborder'>
<tr>
 <td class='maintitle' colspan="2">&nbsp;Home</td>
</tr>
<tr>
 <td class='row2' colspan="2" style='padding:0px'>
<div class='tableborder'>
 <div class='titlemedium'><img src='forums/style_images/Greytallic/nav_m.gif' border='0' alt='' width='8' height='8'> Introduction</div></td>

</tr>
<tr>
 <td class="post1" width="5%" valign="top" style="padding:5px">
<br>
<br></td>
 <td class="post1" width="95%" valign="top" style="padding:5px">
TEXT
<br>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<br></td>
</tr>
<tr>
<td class='row2' colspan="2" style='padding:0px'>
<div class='tableborder'>
 <div class='titlemedium'><img src='forums/style_images/Greytallic/nav_m.gif' border='0' alt='' width='8' height='8'> News</div></td>
</tr>
<tr>
 <td class="post1" width="5%" valign="top" style="padding:5px">
<br>
<br></td>
 <td class="post1" width="95%" valign="top" style="padding:5px">
TEXT
<br>
<br></td> 
</tr>
</table>
</td>
<?php include "end-content.php"; ?>
<?php include "footer.php"; ?>

**mwinter** · 02-22-2006, 09:47 PM

Originally Posted by Doomtomb

a.button:link { color: #CBA300; display: block; padding: 1px; }
a.button:visited { color: #CBA300; display: block; padding: 1px; }
a.button:hover { color: #ffffff; background-color: #565553; display: block; padding: 1px;}
a.button:active { color: #FFFFFF; display: block; padding: 1px; }

This can be simplified to:

Code:

a.button,
a.button:visited {
  background: transparent;
  color: #cba300;
  display: block;
  padding: 1px;
}
a.button:hover {
  background-color: #565553;
  color: #ffffff;
}
a.button:active {
  color: #ffffff;
}

(It only looks longer because of the whitespace.)

The language attribute is deprecated. Use the type attribute instead:

HTML Code:

<script type="text/javascript" src="..."></script>

<a href="http://www.javascriptkit.com">JavaScript Kit</a>

This is the only anchor I can see in your post, and it isn't styled by the CSS above because the rule will only match an anchor (a) element that has a class attribute value of 'button'. Add that attribute:

HTML Code:

<a class="button" href="http://www.javascriptkit.com/">JavaScript Kit</a>

and the rule will be applied.

Mike

Thread: CSS Links hate me!!

Thread Tools

Search Thread

CSS Links hate me!!

Bookmarks

Bookmarks

Posting Permissions