Quick question

[jimday1982]

I have the following:

.linktable{
color: #5c1d07;
font-family: verdana;
font-size: 10pt;
font-weight: bold;
text-decoration: underline;
}

For my text that uses this class, if it happens to be a link, how can I use the same code, but a different color for the hover state? I'm just figuring out CSS if you couldn't tell

Thanks!

[RamsayX]

You need to define <a> classes separately I believe, just like this following:

A:link {
color:#000000;
text-decoration:none;
}
A:visited {
color:#000000;
text-decoration:none;
}
A:hover {
color:#000000;
text-decoration:underline;
}
A:active {
color:#000000;
text-decoration:none;
}

Then just make your wanted changes to the hover state ... hope that helps.

[maxor]

How exactly are you using this?

Like this?

<table class="linktable">

Or is it a div or span?

You can use the hover pseudo class of the a element to style hover states for links

/*  CSS  */

a:link{
  color: #00f;
  }

a:hover{
  color: #f00;
  }

[jimday1982]

Ok thanks, that helps...the problem is that I don't want ALL links to use the same class, only ones that I specify...using code similar to yours, how can that be done?

[RamsayX]

Just define another <a> class, like so:

a.differentLink:link {
color:#000000;
text-decoration:none;
}
a.differentLink:visited {
color:#000000;
text-decoration:none;
}
a.differentLink:hover {
color:#000000;
text-decoration:underline;
}
a.differentLink:active {
color:#000000;
text-decoration:none;
}

Then in the <a> tag, call that class.
<a class="differentLink">A link</a>

Does that work for ya?

[maxor]

Well there are a lot of ways really, but one that I'd use is something like this...

.linktable{
 
  /* all of your styles here */

}

.linktable a:link{
    /* styles for all links in this class */
  }

.linktable a:hover{
   /* hover styles */
  }

Does that help ya out?

[jimday1982]

Just define another <a> class, like so:

a.differentLink:link {
color:#000000;
text-decoration:none;
}
a.differentLink:visited {
color:#000000;
text-decoration:none;
}
a.differentLink:hover {
color:#000000;
text-decoration:underline;
}
a.differentLink:active {
color:#000000;
text-decoration:none;
}

Then in the <a> tag, call that class.
<a class="differentLink">A link</a>

Does that work for ya?

Ahh - that looks like the ticket - I'll play with it and let you know - thanks!

[maxor]

You can save yourself a lot of typing and use the method I posted above.

[jimday1982]

Ok, this is odd - the regular links work, but the hover state isn't...I'm using:

<STYLE type="text/css">
.linktable{
color: #5c1d07;
font-family: verdana;
font-size: 9pt;
font-weight: bold;
text-decoration: underline;
}

.linktable a:link{
color: #5c1d07;
font-family: verdana;
font-size: 10pt;
font-weight: bold;
text-decoration: underline;
}

.linktable a:hover{
color: #B4370E;
font-family: verdana;
font-size: 10pt;
font-weight: bold;
text-decoration: underline;
}
</STYLE>

and then down in my page I have (it's PHP):

printf("<td width=300 bgcolor=%s align=center><FONT face=arial size=2><a class=\"linktable\" href=drink.php?drinkid=%s>%s</a></font></td>", $rowcolorhex, $myrow["drinkid"], $myrow["title"]);

Am I missing something?

[RamsayX]

Try taking out the underline from the link state, see if it switches to underline on rollover. Does that work?

I would also use css to style your characters instead of the font tag.

[jimday1982]

Nope - that didnt seem to do anything - this is very odd...

[maxor]

What element are you using the .linktable class for? Is it a table of links as the name suggests?

[jimday1982]

Sure is - if you have a minute - you can view the source:

It's at http://www.drunkdrinks.com/

I have gone over everything multiple times and I don't see anything wrong...

[jimday1982]

Ok, fixed - I needed to specify a class for my visited links - thanks for all your help!