Phark Image Replacement (Modified) for IE5

When it comes to image replacement, I tend to use the Phark method; I won’t go into the reasoning behind my preference, but if one were interested in the various methods, etc. I would recommend Dave Shea’s Revised Image Replacement article. Unfortunately one of the pitfalls of the Phark method is the fact that it fails in Internet Explorer 5 (PC). Today, I have an ammendment to this method, which resolves the problem. Take the following example:

<h3 id="header">
    Revised Image Replacement
</h3>
/* css */
#header {
    text-indent: -100em;
    overflow: hidden;
    background: url(sample-opaque.gif);
    height: 25px;
}

This is the Phark method of Image Replacement. Here’s my modification:

<h3 id="header">
    Revised Image Replacement
</h3>
/* css */
#header {
    text-indent: -100em;
    overflow: hidden;
    background: url(sample-opaque.gif);
    background-position: 100em 0;
    height: 25px;
}

Of course, in its current state it won’t work with anything, except Internet Explorer 5 (PC). So, we throw in the Simplified Box Model Hack:

<h3 id="header">
    Revised Image Replacement
</h3>
/* css */
#header {
    text-indent: -100em;
    overflow: hidden;
    background: url(sample-opaque.gif);
    background-position: 100em 0;
    bac\kground-position: 0 0;
    height: 25px;
}

Knowing that browsers position images to the top and left by default, I thought that Internet Explorer 5 (PC) was probably setting the image where the text was being forced (or, indented), etc. Of course in a real world situation, it would probably be better to use a conditional comment to change the background-position for Internet Explorer 5 (PC) instead of resolving to hacks.

Update:

It turns out that this method doesn’t resolve the issue in Internet Explorer 5 for Macintosh; but, using “overflow: visible” will accomplish the same result. So in order to get this to work for the Mac version, we’ll need something like this:

<h3 id="header">
    Revised Image Replacement
</h3>
/* css */
#header {
    text-indent: -100em;
    background: url(sample-opaque.gif);
    background-position: 100em 0;
    bac\kground-position: 0 0;
    height: 25px;
    line-height: 25px;
    overflow: visible;
    /* Hide from IE 5 Mac \*/
    overflow: hidden;
    /* End hide from IE 5 Mac */
 }

And that should take care of any issues in Internet Explorer 5 for Macintosh. You’ll notice that I’ve also added a “line-height” declaration. The reason (and this may be obvious) is because if the line-height is not set to the same value as the declared height (in this case 25px), the browser will render enormous spaces below the replaced heading.

If you don’t want to use hacks within the actual stylesheet, you may want to check out Tantek Çelik‘s IE5/Mac Band Pass Filter. Of course, some may wonder how using a “filter” is that much different from a “hack”, but that’s outside the scope of this post.