CSS Help

[Basher]

Ok, I'm having a strange problem with my CSS on my website.

Now, the CSS file states that when hovered over, the link should change colour, however it does, but then once the page is loaded again, or the links have been visited once, the links no longer change colour. Here is the CSS file:

<style type="text/css">



A:hover {text-decoration:underline;font-weight: bold;font-size: 11px;color: #009933;}
A:link {text-decoration:none;font-weight: bold;font-size: 11px;color: #000000;}
A:visited {text-decoration:none;font-weight: bold;font-size: 11px;color: #000000}


</style>

The site btw is www.asginternational.com

[malfunction]

Originally posted by Basher
Ok, I'm having a strange problem with my CSS on my website.

Now, the CSS file states that when hovered over, the link should change colour, however it does, but then once the page is loaded again, or the links have been visited once, the links no longer change colour. Here is the CSS file:

<style type="text/css">



A:hover {text-decoration:underline;font-weight: bold;font-size: 11px;color: #009933;}
A:link {text-decoration:none;font-weight: bold;font-size: 11px;color: #000000;}
A:visited {text-decoration:none;font-weight: bold;font-size: 11px;color: #000000}


</style>

The site btw is www.asginternational.com

Don't bother to define a:link {...} or a:visited {...}. Just define a default style (i.e. just a {...}) and the a:hover {...} - basically a:link{...} only applies while the link is selected (i.e. while the mouse button is down) so it's pretty pointless and I think it's the a:visited that's overiding your a:hover style - but try removing one then the other (not both) to see which one is stopping it from working. Also - it might look good at certain resolutions (and it's bloody common these days) but defining fixed size fonts (small ones anyway!) will give people with higher res screen eye-strain - and it's 'nice' for anyone that needs to be able to increase the font size to do so (check the view menu then text size in IE).

[malfunction]

Or - even easier - just use this:

a:hover {text-decoration:underline;font-weight: bold;font-size: 11px;color: #009933;}
a:link {text-decoration:none;font-weight: bold;font-size: 11px;color: #ffff00;}
a:visited {text-decoration:none;font-weight: bold;font-size: 11px;color: #00ffff;}

To see which style is 'sticking' after a link has been visited - yellow for a:link and cyan for a:visited (I still think it's the a:visited one though)

[Kezzer]

Personally i put all my styles in a seperate CSS file and just link it to the HTML file. I don't like mixing my languages up :S

[Basher]

Originally posted by KeZZeR
Personally i put all my styles in a seperate CSS file and just link it to the HTML file. I don't like mixing my languages up :S

it is in a separate file

[Basher]

Originally posted by malfunction
Don't bother to define a:link {...} or a:visited {...}. Just define a default style (i.e. just a {...}) and the a:hover {...} - basically a:link{...} only applies while the link is selected (i.e. while the mouse button is down) so it's pretty pointless and I think it's the a:visited that's overiding your a:hover style - but try removing one then the other (not both) to see which one is stopping it from working. Also - it might look good at certain resolutions (and it's bloody common these days) but defining fixed size fonts (small ones anyway!) will give people with higher res screen eye-strain - and it's 'nice' for anyone that needs to be able to increase the font size to do so (check the view menu then text size in IE).

WHAT, a:link defines the link formating, the whole point in my CSS file, why would I not want to define this same with hover. a:active is what happens while the button is down not a:link.

also ive tried swapping and changing but to no avail

[Kezzer]

That's odd, i thought that was correct as well. Mine works fine on my site, i think it's just a matter of testing and playing around with it

[Basher]

Originally posted by KeZZeR
That's odd, i thought that was correct as well. Mine works fine on my site, i think it's just a matter of testing and playing around with it

Believe me, I have, Lots!

really irritating me now!

[dawson]

I can't help, but I feel I must say, I like the design, well done!

[Kezzer]

Yeh that's actually well good, i'm impressed!

[Basher]

thanks guys, glad u like it

[THCi]

seems odd to me, are you using anything like #main to create different link styles, say bold for a menu, or anything. They can bork up the a:***** styles.

If you are, use a seperate one for each section:

Take this example...

#main {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
	background-image: url(images/mainborder.gif);
	background-repeat: repeat-y;
	margin: 0px;
	padding-top: 2px;
	padding-right: 3px;
	padding-bottom: 2px;
	padding-left: 12px;

}
#main a:link, a:visited {
	color: #0072BC;
	text-decoration: underline;
#main a:hover {
	color: #0054A6;
	text-decoration: underline;
}

[Paul Adams]

I think there's an (invisible) illegal character on your a:hover line.

Delete it, copy & paste another line and edit the colour - I just took your Style.css file and got it working that way.

That's one reason I use NotePad for editing things like this

[malfunction]

Originally posted by Basher
WHAT, a:link defines the link formating, the whole point in my CSS file, why would I not want to define this same with hover. a:active is what happens while the button is down not a:link.

also ive tried swapping and changing but to no avail

Ah - my bad - been a while since I did anything other than use the same basic CSS and make changes to it. Seriously though you have defined the same styles for different states (i.e. a:link and a:visited) so it would be better to just define your common stuff just in the a class instead of repeating things. Have you tried just defining:

a { ... }

and

a:hover { ... }

?

I usually use something along these lines:

a {color: #7f0000; font-weight: bold; text-decoration: none;}
a:hover {color: #ff0000;}

[malfunction]

Originally posted by Paul Adams
I think there's an (invisible) illegal character on your a:hover line.

Delete it, copy & paste another line and edit the colour - I just took your Style.css file and got it working that way.

That's one reason I use NotePad for editing things like this

I've just opened the css file in a hex editor and can't see anything 'illegal'.

What I did notice though is that you're using <style> </style> tags in your .css file which is the wrong way to do it if you're including the file via a <link href ...> tag (you only use the <style> tag if you're inlining your styles into the HTML header).

[Paul Adams]

Ooops, I stumbled on the solution and came to the wrong conclusion

Reorder the entries in your Style.css file, putting the 'a:hover' line at the end.

(In commenting out your 'a:hover' line, I put mine after the 'a:visited' line and this made it work, even though I had entered it identically, leading me to believe it was a hidden illegal char.)