Leahy/Langridge Image Replacement (LIR)
This technique developed simultaneously by Seamus Leahy
and Stuart Langridge hides the text by setting the height of the element
to 0 (zero) and setting its text overflow to hidden
. The background image is applied to the
padding area, which has been set to the height of the image.
<h1 id="header">This is the headline.</h1> #header { /* background image shows through top padding, set to image height */padding:0 0 0; overflow: hidden; background-image: url(
20px
headline.gif
); background-repeat: no-repeat; height: 0px !important; /* this is the IE Explorer hack */ height /**/:; }
20px
This method offers the following advantages:
No extra
span
elementScreen reader-accessible
Disadvantages include the following:
It requires a hack to overcome box model problems in Internet Explorer 5 for Windows. Internet Explorer ignores the
!important
rule (because it doesn’t support!important
) and overrides it with the second height declaration. Compliant browsers recognize and enforce the first height declaration and ignore the second.It won’t work under the CSS-on/Images-off scenario.
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.