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.

About The Author: 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.

  • http://sarahrlewis.com/ Sarah Lewis

    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.

  • http://www.facebook.com/lilixuan Lǐ Lù Xúan

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

  • http://www.facebook.com/valvanomatt Matt Valvano

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

  • HtmlPiggy

    Good tip. Bacon saved.

  • http://twitter.com/czernys Gabriel O’Czerny

    “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 =)

    • http://www.facebook.com/people/Allen-Gingrich/1435959906 Allen Gingrich

      Very true! Thanks for the addition.

    • http://halilkoklu.de/ Halil Köklü

      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.

  • http://www.chuvyr.ru/ Константин

    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.