different hover links

[drew68]

hey guys...i have this site...i have a css for this site...

http://www.roxcap.com/index.html

the hover links on this home page need to be different from the hover links on this page

http://www.roxcap.com/Investment_Str.../balanced.html

right now this is what my hover styles looks like...


.textbody {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #373636;
text-decoration: none;
}

TD A:hover {
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
color: #ff0000;
line-height: normal;
font-weight: normal;
text-decoration: none;
text-transform: none;
}
a.bartitle{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
}

a.bartitle:hover{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: uppercase;
color: #90B087;
text-decoration: none;
}


how do i do this? the hover links in the content area of the sub pages need to be the same size as the content in the subpages...how do i reference a different size and color of fonts in the stylesheet when there already is one by TD A:hover?

[WebJoel]

-I always get this warm, fuzzy feeling when I see a web page that has tables nested inside of tables nested inside of tables nesting inside of more tables.

(Okay, -it works. -But I'd enjoy the challenge of re-doing this to a table-less *CSS-only design!)

To answer your question, to get certain hover-links to behave differently than the default style for TD a:hover, create a new CLASS. So the 'special links' would include a [CLASS="special_links"] in the HTML, and in the CSS, add [.special_links {selector:declaration; property-value; etc}]

Notice the "dot" before "special_links", above. Make it a dot ("class") because you're sharing this with multiple instances of useage.

-Joel

[drew68]

hey webjoel...yea ya...i'm a nub lol

well i'm a bit confused...i did what you said for the most part but check out the 'fact sheet' link now...

http://www.roxcap.com/Investment_Str.../balanced.html

[WebJoel]

hey webjoel...yea ya...i'm a nub lol

well i'm a bit confused...i did what you said for the most part but check out the 'fact sheet' link now...

http://www.roxcap.com/Investment_Str.../balanced.html

No no, -respect! Respect! -I used to build with TABLEs too. But now, I pick my battles. -And building HTML with tables isn't one of them.

Okay, -what about 'fact sheet'? That's your *pdf. What is supposed to happen? A hover-state change, or what? Currently, I see no change in any navigation link in either IE or Fx. Is there supposed to be something that changes? Is this the problem?

[drew68]

yea...maybe i'm not clear in what i'm asking for

sorry.

okay...see the home page the links in the 3 bar sections...if you roll over them there red. that's fine....it's suppose to.

but in these pages here

http://www.roxcap.com/Investment_Str.../balanced.html

the 'fact sheet' and the Portfolio Manager links should be the same font size as the rest of the text copy on that page...which is arial 12.

the links on the home page are arial 11 and when you hover over them...it's red...that's exactly how i want the links on the balance.html page to be....but it has to be arial 12.

so in my stylesheet i'm referencing the hover link to be....

TD A:hover {
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
color: #ff0000;
line-height: normal;
font-weight: normal;
text-decoration: none;
text-transform: none;
}



but i also need to reference the other links on the sub pages to be font-size: 12px....arial....etc.

i created another class as you suggested and called it special_links. and i went to the balanced.html page and called for the fact sheet to be <class="special_links"> but when i roll over the fact sheet it's calling for the arial 11px. when it should be a new hover style of arial 12px.

wow that was a mouthful lol i'm sorry this is confusing!