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

Question

Any ideas why?

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

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

asumaran · Answer 1 · 2014-12-23T01:49:56.303

67

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.

edited Dec 23 '14 at 01:49

answered Feb 12 '13 at 17:17

asumaran

977
1
8
16

thanks this was the case with me.. so whats is the work around for this? – Lucky Soni Feb 22 '13 at 08:25
You are a savior Thanks :D – Nicholas Francis May 27 '13 at 07:12
Thanks I was going crazy and this helped me. – Nate Mar 06 '14 at 19:54
2

Brilliant tip. text-align:left – Apr 13 '14 at 21:16
I've had this issue in the past and never understood why. Applying `text-align: left;` overrides a `text-align: right` declaration for a parent element and fixes the problem. Yay! – Martyn Chamberlin Feb 16 '15 at 22:50
i get stuck scratching my head on this like once a year and always find my way back here. Thanks! – Collins Apr 20 '20 at 06:52

score 51 · Accepted Answer · edited Dec 19 '18 at 19:05

51

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>

edited Dec 19 '18 at 19:05

Gleb Kemarsky

10,160
7
43
68

answered Oct 11 '11 at 09:08

sandeep

91,313
23
137
155

display block did fix the issue for me. Thanks. – danielson317 Dec 16 '14 at 15:23
I had to use display block and remove float property. – sabrina.bettini Jul 25 '16 at 16:47

score 7 · Answer 3 · answered Oct 11 '11 at 08:50

7

<a/> tags are not 'blocks'

add the following:

display: inline-block;

answered Oct 11 '11 at 08:50

Bart Vangeneugden

3,436
4
33
52

score 5 · Answer 4 · edited May 23 '17 at 12:26

5

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

edited May 23 '17 at 12:26

Community

1
1

answered May 19 '12 at 11:25

Janusz Skonieczny

17,642
11
55
63

Nice! In my case I was able to switch to `:after` and it made no difference, and now text-indent works! – Steve Meisner Jan 13 '14 at 19:59
+1 For switching :before to :after. I'd have never really though there was a difference. – Angry Dan Jul 10 '14 at 17:37

score 2 · Answer 5 · answered Feb 07 '13 at 16:54

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

score 0 · Answer 6 · answered Jul 20 '14 at 01:57

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

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

6 Answers6

Linked