PDA

View Full Version : Why won't the hover thingy work on my links in Chrome?!


Greenguy
2012-12-18, 07:54 PM
As you can tell by the title, my CSS skills are less than stellar |pokefun||greenguy|

I did search on Google for an answer, but with my very limited CSS knowledge, I might as well have been looking at a different language.
(Yes, I know that I technically WAS looking at a different language)

For this page:
http://www.link-o-rama.com/HD-Video/index.html

I'm using this very basic CSS:
<style type="text/css">
body {background:#000000; margin:0px 0px; text-align:center; font-family:'Comic Sans MS',sans-serif; color:lime; font-size:21px;}
a:link {color:#00FF00;}
a:visited {color:#00CC00;}
a:hover {color:#00FF00;}
</style>
There is a very subtle difference in the color of an unvisited link & a visited link, but it is a difference none-the-less. It does work in IE, but the link/text color stays the same in Chrome.

Apparently, this is a known problem with Chrome. Everything I looked at was WAY out of my league as far as how to correct it & the few things I tried didn't work :(

So does anyone know a basic fix for this?

Thanks! |shake|

Cleo
2012-12-18, 08:15 PM
It also doesn't work in Safari.

dunc
2012-12-18, 08:38 PM
Its working on a mac in chrome safari firefox

Your a:link and a:hover styles are the same color, the a:visited link goes slightly darker

Cleo
2012-12-18, 08:46 PM
Messed around with the css for a bit and what seems to work for me on my Mac is Safari, Firefox and Chrome is to make the color different in the link and hover tag like this.


a:LINK {color:#00ff00; text-decoration: none; }
a:visited {color:#00cc00; text-decoration: none; }
a:HOVER { color:green; text-decoration: none; }

Greenguy
2012-12-18, 09:08 PM
Interesting.....I'm finding that if the link & the hover are the same color, it won't work (even using #00FF00 for the link & "lime" for the hover)

BUT......

If I use a different color for each, it works just fine:
<style type="text/css">
body {background:#000000; margin:0px 0px; text-align:center; font-family:'Comic Sans MS',sans-serif; color:lime; font-size:21px;}
a:link {color:#00FF00;}
a:visited {color:#008000;}
a:hover {color:#00CC00;}
</style>
...and here's the pudding:
http://www.link-o-rama.com/HD-Video/index.html

Now I just have to fine tune the colors :)

Thanks! |shake|

Greenguy
2012-12-18, 09:26 PM
For anyone that stumbles upon this thread & is looking for a handy table of colors & codes, I found this one:
http://web.njit.edu/~kevin/rgb.txt.html

That page showed me that #00FF00 and #00EE00 are basically the same color to the naked eye :)
<style type="text/css">
body {background:#000000; margin:0px 0px; text-align:center; font-family:'Comic Sans MS',sans-serif; color:lime; font-size:21px;}
a:link {color:#00FF00;}
a:visited {color:#00CC00;}
a:hover {color:#00EE00;}
a:active {color:#32CD32;}
</style>
The pudding:
http://www.link-o-rama.com/HD-Video/index.html

Cleo
2012-12-18, 09:47 PM
No if IE would just go away we would be in html paradise.

Greenguy
2012-12-18, 10:30 PM
Actually, the way I had it DID work in IE |crazy|

dunc
2012-12-19, 12:41 AM
woohoo :)