LIR vs FIR • Flailing Wildly

An Introduction

Ever since I rolled out version 21.0 of my website in early August (dubbed “Oxygen 2003”), I’ve been using FIR technique to swap out text for images in CSS browsers. Today, I realized that it presents accessibility problems for screen readers such as JAWS and IBM Home Page Reader. They understand the CSS display:none;, but they don’t understand media types (same issue with WebTV/MSN-TV — they understand @import, but not media types — doh!). Also, FIR fails in IE5/Mac.

After Googling for some time, I came across the LIR method. Which seems to cover that base. I’m still not sure about IE5/Mac though. I won’t be able to test it out until Monday when I get back to class, but I can’t really edit it in class. So I have to go to class, view in in IE5/Mac, go home after class and modify the CSS, go back to class the next day to view it again, etc., etc.

What I’m hoping for is a wonderful reader to check this out in IE5/Mac and tell me what’s going on. That’d be absolutely wonderful! Any takers?

Another problem, per say, is that it uses non-semantic markup, meaning mark-up that has no content-related purpose. It’s only purpose is for presentational purposes, which is a big no-no in semantic circles. Nevermind that we’re no longer using tables for layout, but I guess wrong is wrong nonetheless.

A Simple FIR

Your basic FIR technique will replace text with an image by nesting a <span> inside of a parent element. You then hide the <span>, and apply sizing and a background image to the parent element.

Here’s some sample HTML:

<h1><span>Skyzyx.com</span></h1>

Simple, right? Now here’s some sample CSS to go with it:

h1 {
    width:710px;
    height:80px;
    background: transparent url("/img/skyzyxcom.gif") no-repeat top left;
}

h1 span { display:none; }

A Sample LIR

As noted above, the Fahrner Image Replacement technique has a few problems. This method remedies at least two of them (semantics and screen readers), but I’m still not sure about IE5/Mac.

Here’s some sample HTML:

<h1>Skyzyx.com</h1>

Even simpler, right? Now here’s some sample CSS to go with it:

h1 {
    width:710px;
    padding: 80px 0 0 0;
    background: transparent url("/img/skyzyxcom.gif") no-repeat top left;
    overflow: hidden; 
    height: 0px !important; /* for most browsers */
    height /**/:80px; /* for IE5/Win's bad box model */
}

What this does instead is it keeps the original text there, as-is. Screen readers can read it.

Next, instead of setting the height: property, we set the padding: property as our height — only the top padding value, though. This creates room for a background image but no room for text to show up.

We set overflow: to hidden so that the pushed-down text is not visible in CSS browsers.

Unfortunately, “The World’s Most Popular Browser™” screws things up with the faulty box model. So, we add the last line of CSS to fake-out IE 5.x for Windows and force-feed it the value it needs for all of this to work out, by exploiting a CSS rendering bug found in those versions.

Voila! After testing this method in IE5/Mac, I’ll know if we killed two or three birds with one stone. Kudos to Stuart Langridge for this new method!

Update

Yes, the LIR method works great in IE5/Mac. Unfortunately, clicking on the main header doesn’t return you to the homepage, so I’d like to work that out. Until then, I think my IE5/Mac users can get by okay since my navigation is pretty simple to understand. Good news indeed!