Is text-indent: -9999px a bad technique for replacing text with images, and what are the alternatives?

by

A good reason not to use the -9999px method is that the browser has to draw a 9999px box for each element that this is applied to. Obviously, that potentially creates quite a performance hit, especially if you’re applying it to multiple elements.

Alternative methods include this one (from zeldman.com):

text-indent: 100%; white-space: nowrap; overflow: hidden;

…or alternatively (from here):

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

(where ‘padding-top’ is the height you want the element to be).

I think the first method is neater, since it lets you set height in the normal way, but I’ve found the second one to work better in IE7

More Related Contents:

  1. Label text is wrapped but not indent second line
  2. How to place a div over a image? [closed]
  3. elements are not centered aligned inside the wrapper and when I set the width of the wrapper it goes out of the browser width..any solution?
  4. How can I center text (horizontally and vertically) inside a div block?
  5. How do I auto-resize an image to fit a ‘div’ container?
  6. Can I create a div with a Curved bottom?
  7. How to make a HTML Page in A4 paper size page(s)?
  8. Best Practices & Considerations when writing HTML Emails [closed]
  9. Is there a way to style part of an input field’s value? [duplicate]
  10. How does this CSS produce a circle?
  11. CSS fixed width in a span
  12. How to change color of disabled html controls in IE8 using css
  13. Chrome rendering issue. Fixed position anchor with UL in body
  14. Why is an element with position: fixed moving with a non-positioned sibling?
  15. Printing HTML table with many columns/rows using CSS layout?
  16. flex-grow not working in column layout
  17. Min-width and max-height for table attributes
  18. How to make select elements shrink to max-width percent style within fieldset
  19. Height of flex container not working properly in Safari
  20. How to change the style of the title attribute inside an anchor tag?
  21. Empty vertical space between columns in Bootstrap 4
  22. Select second last element with css
  23. Css transition from display none to display block, navigation with subnav [duplicate]
  24. Apply CSS Style on all elements except with a SPECIFIC ID
  25. Is there a way to get a textarea to stretch to fit its content without using PHP or JavaScript?
  26. Select option padding not working in chrome
  27. How to make bootstrap carousel image responsive?
  28. Background-Color of BODY tag applied to the whole HTML [duplicate]
  29. svg background image position is always centered in internet explorer, despite background-position: left center;
  30. Link external CSS file only for specific Div [duplicate]

Leave a Comment