Getting Phark Image Replacement Working in MSIE5.0/Win
Last updated: Sep 24, 2006
As has been reported, the Phark Revisted method of image replacement has two main problems:
- It doesn't work in the "images off/css on" scenario
- It doesn't work in MSIE5/Win
The first problem is probably the more serious one. There are good reasons to believe that some small portion of the web user base surfs with css on, but turns images off to save bandwidth or speed page loads. In this case, the user sees no image and no text. The only image replacement method I know of that solves this problem is Gilder/Levin, and that has some drawbacks of its own.
So following Dave Shea, I had a choice to make, and I chose to use Phark. And now I'm even happier about my choice now that I've figured out a way to solve the second problem and make it work in IE 5.0.
Now granted, the latest numbers (July 2006) show IE 5.0 with a very small .74% market share. For a lot of web techs, that's probably a small enough percentage to ignore when designing and implementing sites. But (as was the case here) when you're working on a design and the only thing that doesn't look good in IE5 is some broken image replacements, well, that's enough reason, I think, to dig a bit deeper.
The problem with Phark and IE5 is that the negative text indent, which pushes the text off the screen, also pushes the background image off the screen, leaving an empty space. After some Googling, I stumbled across this purported fix. It seemed simple enough: give the background-position an opposite, positive value to bring it back where it should be. Only problem was, I couldn't get this to work. Playing with a very small values — 40px — I saw what was happening: the background image was placed correctly, but the right side was cut off by 40px. Using the ginormous negative indents commonly used to insure the text is truly removed from the screen, the image got elided completely.
So what to do? At this point, I'd invested about 4 hours playing around with this, and for the life of me I couldn't find a solution. But then I remembered a technique I found when I was first trying to decide with image replacement method to use. It was called Malarkey Image Replacement, and was almost identical to Phark except that it played around with the letter-spacing property instead of text-indent. I had actually tried to get MIR working on a current project, but it failed in too many browsers, so I moved on. But guess what? It works fine in IE5! So here's what I did:
In the HTML, I have something like this markup for the logo at the top of the page:
<h2 id="logo" class="ir">Our Fancy Logo</h2>In my main style sheet, I have these two rules:
.ir {
margin: 0;
padding: 0;
text-indent: -8888px; /* Phark image replacement */
}
h2#logo {
height: 229px;
width: 170px;
background: url(../images/logo.gif) no-repeat;
}So far, so good. This works in everything I've thrown at it, except for IE 5.0. (And a quick note: I'm not even trying to serve CSS to NS4.x and IE4 — they are dead to me.) But for IE5, it's easy to switch from Phark to MIR with a simple declaration that I put in a conditional comment to target only IE 5.0:
<!—[if IE 5.0]>
<style type="text/css">
/* workaround for Phark Image Replacement in IE 5.0 */
.ir { text-indent: 0; letter-spacing: -8888px; }
</style>
<![endif]—>
And there we have it. Have an extra cup of coffee or another beer, depending on your timezone and/or beverage preference.
If you see any problem with this method, please let me know in the comments here.
Update: Mike Birch noted in the comments that a final fix is sometimes needed — font size needs to be set to zero. So the final declaration is:
.ir { text-indent: 0; letter-spacing: -8888px; font-size: 0; }Without setting the font size to zero, the first letter of the text will be visible about 1/4 of the time. Go figure.