Web Design in a Nutshell, 3rd Edition

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: 20px0 0 0;
        overflow: hidden;
        background-image: url(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 element

• Screen 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.