CSS Tip: Negative Text Indent Not Working

When we first started this blog, I swore that I would post even the simplest of fixes I came across, and here is a fine chance — so I’m taking it!

While coding our new website layout, I ran into a problem that I had somehow always avoided before. Using the Phark Image Replacement method for creating simulated “alt” text for non-images (like a logo or header), I was unable to get the text in my element to disappear like normal.

Here’s the normal way of using image replacement:
a#logo { text-indent: -9999%;
background: url(images/some-image.png) no-repeat top left;
width: 100px; height: 50px; }

Finally, it dawned on me: I had a text-align: right also in this style that was messing it all up. So what’s the final takeaway from this post?

Negative text indents do not work when accompanied by a right text-align.

Allen Gingrich

Author Allen Gingrich

Allen has worked on the web for over a dozen years. Like many young entrepreneurs, he began with a small workspace in his basement, where he eventually formed Ideas and Pixels. The rest, well, is history. Allen enjoys fine wines, weight training, and beautiful, semantic code.

More posts by Allen Gingrich