Problem with Image Links -- blue and purple borders

[puffnstuff]

Not sure if this has already been discussed somewhere.

I have buttons and other images which are being hyperlinked. I don't want the default blue and purple borders around the images. So I had set border=0 in the image tag.

This was working fine for all browsers. Not sure when things changed, but possibly an upgraded version of FF, but now in FF (i'm using version 3.0.15), the purple border appears around the image after it has been visited.

I've also tried various forms in the css, such as border:0 and border:none, but it doesn't seem to have any effect. When you click on one of the buttons on the left side, then hit the back button to return to the previous page, the button has a purple (visited) border, and also the hover attribute is stuck, as the button is still highlighted. The only way to get rid of this is to move the mouse and click somewhere else on the page.


EDITED TO ADD: I've also just added this code to my CSS, but it doesn't seem to be having any effect:
a:link img, a:visited img, a:hover img, a:active {border:none;}


What am I missing? :confused:

Does anybody know how I can correct this?

Here's my site:

bossteel.com (http://www.bossteel.com)


Thank you in advance for taking your time to have a look. :)

[jscheuer1]

No borders here in the latest version of Firefox, outlines yes - this is a mouseless navigation aid that can be disabled, but shouldn't be. The highlight ('hover') on using the back button is due to this being an image rollover as opposed to a css hover. Many browsers remember the script state of a page on hitting the back button. If you use css style to swap background images on hover of the links instead of javascript to swap the foreground image onmouseover, that should no longer be an issue.

[puffnstuff]

Good point about using CSS to swap the hover image.
I will definitely work on that to bring it up to more modern code. This site was done many years ago, and hasn't been touched much since, but we need a complete site overhaul, and as I began tinkering this week, that's when I noticed the purple border around the visited buttons.

So, you say it's not really a border, but an "outline", and that it's ok to have it there? It really bothers me. I've also noticed that it appears in other browsers like Netscape gives a white outline on a visited button.

(so...how can I disable it? and.....why is it better to leave it alone?)

[jscheuer1]

It can be disabled by setting the style for the element(s) involved like so:


a {
outline-style: none;
}

But it really is less obtrusive than you may imagine. The reason for keeping it is accessibility. If a user has no mouse or other pointing device, or cannot for some reason use their mouse or pointing device, they will only be able to activate the links on a page by pressing the tab key which will move the outline from link to link. When the outline is around the link they want, they can then hit the enter key. With no outline, they have no visual cue as to which link would be activated by hitting enter.

If you don't like the color of the outline, you may use the outline-color style property to change that. But it should still at least legibly contrast to the background it will be displayed upon.

Incidentally, IE also displays this outline, but only if you start using tab key on the document.