Better alternative to text-indent:-9999px
Posted on October 8th, 2009 by Jeff LinThanks 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;
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;
Bust Out Solutions is a full-service web design, development, and strategy consultancy based in Minneapolis, Minnesota, USA. We intelligently engineer websites with simple, beautiful design that works.
Take a look at our work or learn about the company. If you like what you see, we'd love to hear from you.
Bust Out Solutions, Inc.
514 North Third Street, Suite 105
Minneapolis, MN 55401
(612) 280-5509
hello@bustoutsolutions.com
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?
Posted at 9:12 pm on January 22nd, 2010Hey 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.
Posted at 12:35 pm on January 23rd, 2010Excellent, thanks!
Posted at 2:35 pm on February 16th, 2010