Link problem.

I'm having a problem to remove a border from link...

[fredericomf]

I'm having a problem to remove border from link.

My html code:

<a href="#m1">
<img src="testButton.jpg" />
</a>

When the link is clicked a blue dotted border is created in img element.

I can't solve this problem using pseudo-elements (:hover, :action, :link, :visited).

Now i need your help to solve this problem.

Thanks.
Frederico.

[CSS_Kidd]

Yes you are correct. You can fix this by styling the pseudo-classes for the a: selector -

a:hover
a:active
a:link
a:visited

More information can be found here [w3schools.com]

You will want to use:
text-decoration:none
and/or
border:none
to avoid underline text or bordered images that are applied by default to urls.

[rocknbil]

try

#m1 a img { border:none; }

[fredericomf]

Thank you.

I've detected the problem. The browser Firefox show a dotted border in Links, the pseudo-classes can't correct this problem. I've tested this on IE-#*$! and this border isn't showed.

Thanks.

[CSS_Kidd]

I just realized you are referring to the dotted white outline that pops up when you "click" a url (caught that when you mentioned FireFox).

The answer as far as I can tell is: No you can not change this. This is something that the browser does on its own when it comes to navigating the page. It is an accessibility feature that only FireFox seems to have.

There was a post on this [webmasterworld.com] not too long ago.

[CSS_Kidd]

Well I stand corrected... I search the interslice and came up with this fix:

a:active
{
outline: none;
}

a:focus
{
-moz-outline-style: none;
}

Sorry.. I should have look harder before I gave the answer above.

However when validating the css,

a:focus
{
-moz-outline-style: none;
}

will give you an error saying it doesn't exist.

[fredericomf]

Thank you so much Kid.

This is so helpfull!

Thanks!

[bzgzd]

I think what you want to achieve is

:focus { outline: none; }

or outline: 0;

This is a little bit "controversial" and some people are against it because that dotted line can be use for navigation on page using Tab and Enter keys.

Without focus it is not visible where focus is.

However I also don't like that dotted line so I usually reset it and let it like that.

It is also part of Eric Mayer's reset (with comment : remember to define focus styles!)
[meyerweb.com...]

[CSS_Kidd]

bzgzd - Since this only happens in FireFox that is why it is:

a:focus
{
-moz-outline-style: none;
}

if you just use:

:focus { outline: none; }

look what happens in Safari and Opera...