Thanks to David Reese for this great tip. Instead of this:

text-indent: -9999px; height: 20px;

you just do:

height: 0; overflow: hidden; padding-top: 20px;

11 Comments

Joshua Clanton

—

I’m curious as to why this is supposed to be a better alternative. Isn’t it just another way of achieving the same thing?

Jeff Lin

—

Hey Joshua, in Firefox if you use a negative text indent on an <a> you will get an outline of the link that goes -9999px off the screen. There are ways to prevent this using focus {outline:none;}, but you don’t need it if you use the method described above.

Anonymous

—

Excellent, thanks!

madr

—

Excellent tip!

However, if you set overflow: hidden with the text-indent approach, you get rid of the focus-feature as well. I myself use em instead of pixels since it is a bigger unit that pixels.

I would have out it like this, generally:

text-indent: -999em; overflow: hidden; height: 20px;

Jonathan

—

Great, thanks for this!

OJ

—

True, it might be a better alternative to negative text-indents, but resulting to add a padding to the container may confuse a designer who wants to keep the box the same size. This scenario would specially be true for those who want to keep the containing box’s size as a reference for the background image. It’s just OK to use the text-indent/outline: 0 in that case.

John

—

I found this page while looking for a SEO friendly alternative to what Google describes as “Hidden test and links”. Surely this still poses the same problem? I’m not trying to get round Google, but I am using the indent to shift navigation text out the way and use an image. This is purely for image based navigation. Is there a way to move text and keep Google happy?

bustoutsolutions

—

Hey John, I’m actually not sure if Google treats this as hidden text. It definitely is hidden from human view, but the text in the code is there are robot-readable. Since Google’s search algorithm is on proprietary lock-down, we don’t really know how the Googlebot treats CSS “tricks” like this one. I can tell you that it hasn’t been an obvious problem for us before in terms of getting penalized.

Adam

—

In looking for a solution to the -9999px solution and working out the opinion of Google on this I came across this article which quotes people from Google in a podcast directly saying that Google takes a dislike to the -9999px method of moving text off screen. Personally I prefer the semantics of “hidden” over -9999px, and I can understand the latter being seen as blackhat.
http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

GEO

—

Its for IE9, text indent doesnt work on submit buttons.

Amir

—

I love this method because it’s SEO friendly but
-9999px technique is used by spammers to game search engines so don’t try to use it.
There’s also a great alternative by using alt attribute whic google understand it.
read this short article for more info:
http://luigimontanez.com/2010/stop-using-text-indent-css-trick/