Why does Chrome show an odd-shaped highlight around my image link when I tab to it?

Question

When tab to a link on my webpage in Chrome, the tab hightlight box around this image link appears like this:

(the orange border is what Chrome shows as the highlight box)

The HTML/CSS isn't all that special:

<a href="download.html">
    <img src="images/download_button.png" class="downloadbutton"/>
</a>

img.downloadbutton
{
    margin-right: 0px;
    border:none;
}

Any ideas?

Answer 1

My guess, either there's a space at the end of the img line, or it's HTML treating new lines as white space. Try putting the contents of the a all one line and see if it goes away then.