Weird border around image on click

Hi there… please visit the link below

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!

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.