[BenignDesign]

Here's my issue this time:

I'm using images for some links. I've got the whole border:0px; bit in my CSS. The problem is browsers tend to put a black dotted border around the images when they are active.

I've tried several tips/tricks I pulled up on a google search, but to no avail.

Anyone have a fail-proof method of getting rid of these annoying little lines?



Many thanks!

[BenignDesign]

heh... nevermind. If I had put what few brain cells I have to use, I could have figured it out sooner. Thanks for staring at my typing though... I got it figured out.

[Martyr2]

I may know the solution, but can you just post your fix here for others to see in the future? Thanks.

[BenignDesign]

The solution I came up with is a class in CSS, like this:

a.toolbar:link {outline:none;}
a.toolbar:active {outline:none;}
a.toolbar:visited {outline:none;}
a.toolbar:hover {outline:none;}

In your HTML, you do this for your link:

<a class="toolbar" href="#"><img src="test_img.png" /></a>

I used this with text links and it works that way too! Yay! I'm not having a moron day!

[Martyr2]

That is what I had thought but I was going to suggest just doing it for all link tags...

a {
	 outline: none;
}

Thanks for posting the solution. I am sure others can learn from it in the future.

[BenignDesign]

Your solution was one I pulled off google and it didn't work for me. Most likely a conflict with some other code on the page (such as 8 different link classes).... just an inkling