CSS got me in a knot! >:[

[dirtystim]

Maybe I should havr posted here first . . .. if so soz mods!

Hi there
well my aim is to have all my links different colours as normal but no text decoration, except on hover. Trouble seems to be that as I ONLY want underlining on hover (regardless of wether visited, active or whatever) it seems to override the other instructions.

Can someone do the equivalent of cracking me over the head to wake me up an' show me what I am doing wrong here?!

here's me tiny CSS .. .
Please help me if you can.
Thank you very much.

d

================================
a:link { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #0000CC; text-decoration: none}

a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #666666; text-decoration: underline}

a:visited { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #0000CC; text-decoration: none }

a:active { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #0000CC; text-decoration: none }

table { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; color: #000000; text-decoration: none}

body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; color: #000000; text-decoration: none }

td { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; color: #000000; text-decoration: none }

tr { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; color: #000000; text-decoration: none }

th { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; color: #000000; text-decoration: none }

tt { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; color: #000000; text-decoration: none }
textarea { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; color: #000000; background-image: none}

a { }

address { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; font-weight: normal; font-variant: normal; color: #000000; text-decoration: none}

 

[dianal]

Hello,
You are correct in your assumptions in using CSS.
BUT: browsers interprete a:hover wrong if it is placed before active and visited.
The correct order should be:
a:link { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #0000CC; text-decoration: none}

a:visited {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #0000CC; text-decoration: none }

a:active {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #0000CC; text-decoration: none }

a:hover {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; color: #666666; text-decoration: underline}
....
===========
Give it a try

 

[dirtystim]

YAY!

Thanx it worx brilliantly!

Do you have any URL's by you I can look at dianal?


Many many thanx
d

 

[dianal]

By me - sorry, but not in english.
I would recommend you

http://www.richinstyle.com/

- they have very good guide to CSS2 with warnings if some element won't work in some browsers.
Also see

http://www.w3schools.com/

- Learn CSS link - very comprehensive with examples.
Success!