POSTS FOR 2003

LIR vs FIR

Web Standards589 words3 minutes to read

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!

Ryan Parman

Ryan Parman is an experienced software engineer, open source evangelist, and passionate user advocate currently living in Seattle. He is the creator of and , and worked on DevOps and Security at . He is now bringing learning into the digital age as an Engineering Lead and Site Reliability Engineer at . Ryan's aptly-named blog, , is where he writes about ideas longer than .