Method B: LeahyLangridge Image Replacement (LIR)

---

Method B: Leahy/Langridge Image Replacement (LIR)

Simultaneously developed by Seamus Leahy (www.moronicbajebus.com/playground/cssplay/image-replacement/) and Stuart Langridge (www.kryogenix.org/code/browser/lir/), the LIR method set out to handle image replacement—without the meaningless but necessary <span> element that FIR required.

Instead of using the display property to hide the text, LIR moves it out of the way by setting the height of the containing element (in our example, the <h1>) to 0 and setting padding-top to equal the height of the replacement image.

The Markup and CSS

Since we don't need the extra <span> element for this method, our markup would be reduced simply to

 <h1 >Leahy/Langridge Image Replacement</h1> 

And the CSS that's necessary to replace the text with the image shown in Figure 14-4 is the following single declaration:

 #lir {   padding: 90px 0 0 0;   overflow: hidden;   background: url(lir.gif) no-repeat;   height: 0px !important; /* for most browsers */   height /**/:90px; /* for IE5/Win */   } 

Figure 14-4: lir.gif, created in an image editor

The image chosen to replace the text with is 90 pixels in height, hence the padding on top of the same value. For most browsers, we're setting the height to 0, which effectively gets rid of the text (or anything else that's contained within the <h1> element). We've used the !important rule to make certain that the preceding value is recognized over the one that follows (for IE5/Windows only). Competent browsers will ignore the second height rule, while IE5/Windows will recognize it.

Box Model Woes

The final rule is put in place to make up for IE5/Windows' misinterpretation of the CSS box model (see "The box model problem" in Chapter 12). Since padding is added in addition to height and width values in IE5/Windows, we'll need to serve an adjusted value specifically for those browsers.

In this case, the height will always equal that of the height of the image we're using for replacement.

Drawbacks

While Method B makes it possible to lose the extraneous <span> element (trimming code is always a good thing), it shares a drawback with Method A in that users with images disabled but CSS enabled will see nothing at all.

We could also argue that another drawback of the LIR method is the fact that it requires a Box Model Hack in order for IE5/Windows to behave properly.

Since Method B doesn't use the display property to hide the text, one could assume that this method is a better choice to allow users of screen-reading software. But like Method A, the Leahy/Langridge method should also be used with caution—taking into consideration the accessibility concern of an "images off/CSS on" scenario.

Let's take a look at one more variation on image replacement, developed by Mike Rundle.

---