{text-indent : -9999} for image replace not working

Answer 1

text-indent does not work on inline elements and <a> is an inline element so you can define display:block or display:inline-block to your <a> tag.

.dashboard-edit,
.dashboard-delete {
  height: 30px;
  width: 50px;
  background: url("https://i.stack.imgur.com/kRZeB.png") no-repeat top left;
  text-indent: -9999px;
  display: inline-block;
}

<a href="#" title="Edit" class="dashboard-edit">Edit</a>
<a href="#" title="Delete" class="dashboard-delete">Delete</a>

Answer 2

<a/> tags are not 'blocks'

add the following:

display: inline-block;

Answer 3

In my case text indent was not working on H1 because of :before pseudo tag I used to correct a fixed header positioning problem

.textpane h1:before, .textpane h2:before, .textpane h3:before {
  display:block;
  content:"";
  height:90px;
  margin:-90px 0 0;
}

This applied to H1 elements with negative indent hack showed text on top of the images in FF & Opera

Answer 4

Apart from the reason that text-indent doesn't works on inline elements. another reason is if your element or one of its parent has been set with text-align:right

So make sure your element has been set with text-align:left to fix this.

Answer 5

Keep in mind that (if you care) with inline-block the text-indent image replacement technique will fail in IE7. I recently had a heck of a time figuring that one out. I used this technique for IE7 and it works:

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Answer 6

I had same issue, I checked display and text-align. finally I find out.

I was working on rtl design and in the theme the direction changed to rtl.

You can change the container or each element to ltr to fix the issue.

dashboard-edit, .dashboard-delete { 
    direction: ltr;
}