Log in

View Full Version : CSS Links hate me!!


Doomtomb
02-20-2006, 11:10 PM
I've tried everything!!

How come this link won't be stylish?!


<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
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:



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.)


<script language="JavaScript" [...]The language attribute is deprecated. Use the type attribute instead:



<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:



<a class="button" href="http://www.javascriptkit.com/">JavaScript Kit</a>
and the rule will be applied.

Mike