Negative text-indent causes large link selection on click

Question

So a method I often use to create nice SEO links that use images is the text-indent: -9999px; trick. Basically, I create a block-level anchor with a background image. I set its text-indent to a large negative number so you don't see it and that's good for SEO. When I click on the link though, the outline of it shoots off the page (i.e. it goes with the really far off text). I've found this only happened in certain cases, most of the time:

<div>
  <a href="#">SEO text</a>
</div>

div {
  width: 100px;
  height: 100px;
}

  div a {
    display: block;
    text-indent: -9999px;
    width: 100px;
    height: 100px;
    background: url(stuff) etc...;
  }

The above code will 95% of the time only have the outline when you click the link of just the 100 x 100px area. However, when not defining the dimensions of the parent, it seems to shoot off the page.... I think. But in this one case of mine, it has dimensions on the parent yet still shoots off the page. As a result, I did the a span { display: none; } trick but I want to know how I can do it with the text-indent trick but fix the outline.

Does anyone know how to fix this? Do I need another parent or need to set another CSS property?

Answer 1

here is a great article for removing that cursed outline in firefox

just adding a link felt very lazy so here, add this into your CSS:

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

Answer 2

Just Add overflow: hidden on your div a

Answer 3

Add overflow:hidden to the a tag.

div a { overflow: hidden; }

This maintains the outline border, but only in the specified coordinates of the element.

Applying overflow: hidden on the div or outline: none like Wayne Austin suggests will completely remove the outline which is a usability issue.