{text-indent : -9999} For Image Replace Not Working

Any ideas why? http://jsfiddle.net/FHUb2/

Solution 1:

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.

Solution 2:

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>

Solution 3:

<a/> tags are not 'blocks'

add the following:

display: inline-block;

Solution 4:

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

Solution 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;
}