Text Indent CSS Trick

Its 2am and I just discovered something abnormal in CSS.

If you are using the text-indent trick to hide text in your CSS, you must set the text-align value to LEFT.

If it is set to text-align: right it will not work.

It works in firefox, but not in IE or Opera. This is strange, but it works!

This info maybe useful to someone switching from the Fahrner Image Replacement, or simply having issues with text-indent in CSS and Internet Explorer.

  • Dylan Oliver

    Hey, thanks. I was wondering about this. Never would’ve guessed text-align had anything to do with it.

  • Norbert Oszlanyi

    I’m not sure, that it’s true… But you must set display: block to make work this trick! IE6 hides inline elements completely.

  • Ola

    Thanks! Strange one. Solved my problem in a jiffy. I’ll let you in on another one.

    1. You have an on z-index: 200.
    2. You have a on z-index:100. This wraps an .
    3. You’ve positioned the with the nested so that the is directly above it.
    Problem: In IE6,7 the marker can’t be entered into the but works fin in FF.
    Solve: Give the a background color. Voila! The cursor is visible and it works as expected.

  • melody

    just ran into the same cryptic problem. this totally helped me :)

  • Dom

    of course you need to align left, if you align right a negative value makes no sense.

  • Nice… very utils!!!


  • Lehoangel

    This suggest me some interesting stuffs to do with my project.
    Thanks a lot, Vinh Pham :)

  • saved my life, thanks :)

  • thanks it worked for me

  • Javier

    Thank you, just saved me hours of hacking around a problem I had :D