How Do I Remove Hyperlink Border from Image Link?

dgarofalo
dgarofalo used Ask the Experts™
on
How do I get rid of the blue border on the active state when clicking on the logo in the upper-left corner to back to the home page?

https://sheboyganbjj.com

I already added the following code as an embedded style.

#Map img a:active {
    border: 0;
    text-decoration:none;
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Paul MacDonaldDirector, Information Systems

Commented:
#Map img a:active {
    border: 0;
    text-decoration:none;
    outline: none;
}
Dr. KlahnPrincipal Software Engineer

Commented:
<IMG SRC="thisismyimage.png" ALT="this is my image" BORDER="0">

Open in new window

Hi,

this is using the CSS of your link when focus

here is a way to do it for hover, active, focus image that have a link
a, a:hover, a:active, a:focus, a img, object, embed {
    outline: none;
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
 }

Open in new window


Note: focus is required for people that navigate with keyboard....So this can cause problem with  accessibility...
outline:0 can replace outline : none in some case it's not working with a browser.

other method depending of your needs

to remove from an image with ahref
a img {outline : none;}

Open in new window


to remove the focus css to all element
*:focus {
    outline: none;
}

Open in new window


to remove focus css to a specific element like image
. focus img{
 outline: none;
}

Open in new window


to remove it from link only
a, a:active, a:focus {
   outline: none;
}

Open in new window


in some browser it may not work so you can add this to your class so it will be transparent
outline: transparent;

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial