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
  • Thanks so much for posting this. I didn’t have text-align: right explicitly set in my rule, but it was inheriting it, and your post was the clue I needed. Much appreciated!

  • Alex

    Awsome finding! Thank you for this.

  • thank you for solution
    can’t work with text-align:right – –

  • Thanks Allen for the solution. Seems like a few others ran into this issue as well!

  • HtmlPiggy

    Good tip. Bacon saved.

  • “Negative text indents do not work when accompanied by a right text-align.” – False Statement

    It works but you need to set the text-indent atribute positive and set direction atribute to rtl. Hope it help =)

    • Very true! Thanks for the addition.

    • The statement is true as it states negative text indents and not positive.

  • Ollie Murphy

    It’s always the simplest thing isn’t it? Can’t believe I didn’t think of that. Thanks for the tip, you definitely saved me some time.

  • You do not need to specify the width or height.
    You can use other scale: px, em…
    For text-indent need the correct value text direction, simple add attribute dir=”ltr” for text-align:left or dir=”rtl” for text-align:right, in CSS3 – direction: ltr | rtl | inherit.
    You will not need to remove the text outside the window.
    Remove text outside the element, simple add overflow:hidden.
    Sorry for my English.