Weird border around image on click

HTML & CSS
1

Hi there… please visit the link below

http://bigtapin.com/

Click on any of the tickets on the right. See the weird yellow dotted border around the image? How can I remove this?

Thanks so much!

2

No, I don’t see it, because it depends on the browser you are using (are you using Firefox?) Anyhow, it’s the browser’s default :focus style, and it appears as a big box off to the left because of the negative text indent. An easy way to fix that is with overflow: hidden—

#gaticket {
width: 248px;
height: 147px;
background: url(images/ga.png) no-repeat 0 0;
text-indent: -9999px;
margin-top: 15px;
display: block;
[COLOR="#FF0000"]overflow: hidden;[/COLOR]
}

That will still leave you with a dotted box around the ticket, though. This is a handy accessibility feature, so it’s a bit cruel to remove it altogether. To remove it altogether, you can do something like

#gaticket:focus {
outline: none;
}

But a better approach is to change it to a more acceptable style, such as

#gaticket:focus {
outline: none;
[COLOR="#FF0000"]background-color: #111;[/COLOR]
}

I know that’s a bit ugly, but you get the idea: style the element in some way that makes it obvious it has focus, so that if someone is using a keyboard to tab from one link to another, it’s clear which link has focus.