Linked Image Border Styles

Question

I want to be able to link my image. Click on it. Go back to the page and see that it was visited. I want my visited images to have a different color border when I go back.

My code:

a:link img{border-color:#FFF; border-style:solid; border-width:1px;}
a:hover img{border-color:#03F; border-style:solid; border-width:1px;}
a:visited img, a:active img{border-color:#036; border-style:solid; border-width:1px;}

Any ideas would be appreciated.

Answer 1

It may help to tell us which browser isn't working, because they all handle anchor links that have embedded text differently.

Answer 2

Link CSS can be hard to get right, because many browsers can be quirky about it. The best order to declare link CSS is

• Link
• Visited
• Hover
• Active

(Also remembered as the mnemonic LoVe/HAte).

Also, try declaring your css:

a:hover img {border: 1px solid #036;}

instead of specifying it in three different declarations.