Introduction
Image Replacement (IR) is a method of enhancing a headline using a graphic while maintaining a semantic (meaningful) source code. Using Image Replacement techniques, the content code and the presentation code are separate. Moving toward the separation of content from presentation is a very common objective today which brings many advantages such as accessibility and ease of maintenance.
The ideal image replacement methods are based on using generated content. A CSS2.1 solution and a CSS3 solution are examples of these methods described at www.literarymoose.info. Unfortunately, many of the current browsers in use today do not support generated content and so, until then, if we would like to benefit from the greater accessibility and the ease of maintenance offered by the separation of content from presentation by using IR, we will have to rely on other IR methods today.
I have been experimenting and recoding some of the current IR methods as well as designing a new method with the aim to find a solution for as many browsers as possible, including IE5mac. I feel the Gilder/Levin method is the most successful method because it functions in CSS-on/Images-off situations.
However, none of the Gilder/Levin techniques (including the adaptation as will be described here) work with transparent headers. In such cases where transparent headers are required, LIR is recommended. However, LIR doesn't work in CSS-on/images-off situations and so, for most web sites, a combination of this Gilder/Levin method and LIR would be used - with LIR used for those headings that must be transparent.
With regards to transparency, if in cases where an image has already been prepared and contains transparent areas (such as a transparent gif) it could still be used in the Gilder/Levin method by opaquing it out by setting a background color on the absolute inline element (the em element in this case). This will effectively make the header opaque so that it will work in this Gilder/Levin method. This is a useful technique because it saves the extra step of having to go into a graphics editor to resave a copy of a transparent header to an opaque version.
The Gilder Levin IR Method Adaptations
The following describes several adaptation to the Gilder/Levin image replacement method. These adaptations address several issues mostly concerning IE5mac rendering problems.
Special thanks to Harley Jacoubsen for sharing notes with me back and forth from Toronto to Vancouver during the research. Harley was the first to recognize the initial link disfunctionality in IE5mac which has now been repaired. Without Harley's suggestions I would have never pursued an IE5.0 mac solution which is now the basis of the negative margin method. Harley also object oriented the code, refined it to be functional in IE5win and discovered a bug with the common *>html mac hack and a solution. Thank you Harley!
There are two fundamental methods used in these technique. Let's call them the "absolute inline element method" and the "negative margin method".
The first is the "absolute inline element method" which uses an inline element such as a span (or an em). This inline element is given a background image and then it is positioned absolutely over top of the heading text. This is the basis of the original Gilder/Levin IR method.
The second method relies on negative margins and doesn't need absolute positioning. I found that this negative margin technique overcomes several issues with IE5mac. This is the basis of one of the important components of this adaptation of the Gilder/Levin IR method.
In order for the two methods to work together, so that IE5mac is fully supported, the inline element must be an <em> element and this inline element must come first in the source code in the heading tag.
For further accessibility, it is ideal to have the title attribute text to be the same as the heading text.
An em element is used instead of a span in these versions because in both the negative margin method and the absolute method, a span will not be clickable in Mac IE5.x if used as a link. However, unlike spans, em elements function reliably in Mac IE5.x as well as all the other browsers.
The inline element (the em) must appear before the heading text or a number of problems occur: the background header image will not appear in IE5.0mac if used in a float and the hx tag looses its height in IE5.1mac. This is why the inline element (the em tag) has been placed before the heading text in the source.
The special font size value of 10px for IE5mac in the code may be changed to a different value depending on the dimensions of the header image and the amount of text the headline requires. The headline text must fit completely underneath the header graphic and so a small text size such as 10px will work in most cases. At least 10px is recommended for legibility. There is not much room in most cases for choosing a much larger text size, unless there is ample room under the header image such as would be the case with a short headline replaced with a large image. Remember, the 10px value is only seen by IE5mac when CSS is on and images are off. Other browsers will use the 1.2em value. This 1.2em value for the other browsers may also be customizes as per each headline but care must be taken not to choose a font-size that is too large here either because the headline is set to overflow: hidden and text that is too large will appear clipped when CSS is on and images are off. 1.2em is a good general purpose value here.
All the examples depict the heading used as a link. If the heading does not need to be a link, simply remove the anchor element from the source. There are three demos for each version showing the IR method used in the various positions: static, absolute and in a float. The IR code in the 3 demos for each version (static, absolute and in a float) is identical.
I have listed the versions in my order of preference with the most successful versions at the top.
There are three charts showing three methods: the Gilder Levin Ryznar Jacoubsen IR method, the Gilder Levin Ryznar IR method and the RIENM IR method. I find the Gilder Levin Ryznar Jacoubsen IR is the ideal method. It is shown in the first chart.
Gilder Levin Ryznar Jacoubsen IR
| Version Number | IE mac Specifics | Notes |
|---|---|---|
|
IE5.1mac receives the negative margin method. IE5.0mac receives the negative margin method. All other browsers (the modern browsers) receive the absolute inline element method. |
This code now incorporates Philippe Wittenbergh's * html>body iemac hack to clearly separate the CSS code for standards browsers from the special CSS code required for ie5mac. This hack is superior to the older *>html mac hack because it doesn't interfere with ie5win. Thank you Philippe. This modular approach will allow us to easily delete the CSS code for ie5mac in the future when ie5mac becomes extinct while retaining the CSS code for the standards browsers. I feel this IR method is the most successful method to date. |
|
|
IE5.1mac receives the negative margin method. IE5.0mac receives the negative margin method. All other browsers (the modern browsers) receive the absolute inline element method. |
Same code as above except it includes a special cursor: hand rule to make the hand icon appear for ie5win. Note: This will prevent the code from validating. If you need the code to validate use version 1 (above). Choosing to support IE5win with the special cursor: hand rule (choosing between version 1 or 2) will depend on your needs. |
Gilder Levin Ryznar IR
Some of the versions of the following Gilder Levin Ryznar IR method (versions 2, 3 and 4) need a floated wrapper to prevent the background of the inline element separating from its text in IE5.1mac. This IE5.1mac phenomena is documented here. It causes the headline text to appear on top of the absolute inline element in IE5.1mac. The floated wrapper solves this problem. Note that version 1 doesn't need to use a floated wrapper and is therefore the most successful of the Gilder Levin Ryznar IR versions. There is now a solution to this as found by Philippe Wittenbergh (www.l-c-n.com), which is to give all preceding floats in the layout a relative position. This would eliminate the need for the floated wrapper. This solution is documented in more detail from this page. Thanks Philippe! If for some reason you are unable to give all preceding floats in the layout a relative position then version 1 would be the best solution from these Gilder Levin Ryznar IR methods because it doesn't need a floated wrapper.
If support for IE5.0mac is not required, version 4 without the floated wrapper would be the best solution, however, as indicated above, you would need to specify any other floats used in the layout to be position: relative so that it is reliable in IE5.1mac. If for some reason you are unable to give all preceding floats in the layout a relative position then version 1 would be the only viable solution. In all cases, version 1 is the simplest and most successful solution of these Gilder Levin Ryznar IR methods.
Opera 7 win and Opera 7 mac display a gap in the static and the "in a float" variations of versions 2, 3 and 4. This is probably not related to this IR technique at all but rather a problem related to the type of clearing element used to clear the floated wrapper. Another type of clearing element could be used such as a non breaking space in a div with a line-height of 0 and a font-size of 1px.
| Version Number | IE mac Specifics | Notes |
|---|---|---|
|
IE5.1mac receives the negative margin method. IE5.0mac receives the negative margin method. All other browsers (the modern browsers) receive the absolute inline element method. |
Code is easy to follow because the special CSS for IE5mac is separated from the code for the standards browsers. Apparently, IE5win occasionally reads the *>html hack that is supposed to be only read by ie5mac. The Gilder Levin Ryznar Jacoubsen IR method as described above, fixes this problem. |
|
|
IE5.1mac receives the negative margin method. IE5.0mac receives the negative margin method. All other browsers (the modern browsers) receive the absolute inline element method. *Needs a floated wrapper for IE 5.1mac. |
Code is easy to follow because the special CSS for IE5mac is separated from the code for the standards browsers. The only difference between this version and version 1 (above) is that this version is wrapped in a floated wrapper which is a known solution to solve some layering problems in IE 5.1 when the absolute method is used. Because this solution doesn't use the absolute inline method, the floated wrapper may not be necessary and so this version may not be required unless the one above is found to have a problem. I only kept this version as a backup solution in case there may be problems with version 1 or any of the other solutions. |
|
|
IE5.1mac receives the absolute inline element method. IE5.0mac receives the negative margin method. All other browsers (the modern browsers) receive the absolute inline element method. *Needs a floated wrapper for IE 5.1mac. |
CSS Code is somewhat complicated because the IE5.0mac code is mixed in with the code for the standards browsers. *The floated wrapper (called div.floatingwrapper in the example) that is needed for IE5.1mac and the div.floatingwrapper css may be discarded from the code as long as every other float in the layout is given position: relative. This is documented in detail here. |
|
|
IE5.1mac receives the absolute inline element method. IE5.0mac is simply not supported. All other browsers (the modern browsers) receive the absolute inline element method. *Needs a floated wrapper for IE 5.1mac. |
Advantage: simple css code. Disadvantage: *needs a floated wrapper for IE5.1mac. *The floated wrapper (called div.floatingwrapper in the example) that is needed for IE5.1mac and the div.floatingwrapper css may be discarded from the code as long as every other float in the layout is given position: relative. This is documented in detail here. |
|
|
IE5.1mac receives the absolute inline element method. IE5.0mac is simply not supported. All other browsers (the modern browsers) receive the absolute inline element method. No floated wrapper is used. |
This code is very close to the original Gilder/Levin method. It only works successfully in IE5.1mac if used in a float. Unreliable if used in a static or an absolute position. If you need this to also work in a static or absolute position, use version 1 or 2 instead. | |
| Original Gilder/Levin method |
IE5.1mac receives the absolute method IE5.0mac receives the absolute method No floated wrapper is used. |
IE5.1 mac will not recognize the height value on the h.x tags resulting in collapse and overlap in IE5.1mac. When used in a float the method completely disappears in IE5.0 mac. |
Relative Inline Element with Negative Margin IR (RIENM IR)
This new method is based on replacing the heading without relying on absolute positioning. If anyone would like to try to add to this code to make it work in Opera 6 mac, please feel welcome. I would be happy to see this work. Until this method works in Opera 6 mac, I wouldn't suggest using it unless you do not need the Opera 6 mac support. Instead, use the superior Gilder Levin Ryznar Jacoubsen IR method.
| Version Number | Strategy | Notes |
|---|---|---|
|
Relative Inline Element with a Negative Margin |
Works in every browser I tested except in Opera 6 mac. It might work in all versions of Opera win but I have't tested them all yet. Also it doesn't work in IE5.0mac when it is used in a float - the header text appears on top of the image but that may not be much of a problem because it doesn't destroy the layout in IE5.0 mac and IE5.0mac is a very rare browser. Opera 6mac doesn't seem to want to place the inline element (the em) on top of the heading text even if you specify a high z-index for the inline (em) element. If anyone can solve this issue for Opera it may make this image replacement technique an ideal method. Does anyone have any suggestions how to make the inline element (the em) appear on top of the text in Opera 6mac? I have even tried adding an extra span with a lower z-index into the markup for the header text to force it below the em element and this still doesn't work in Opera 6mac. Works in IE5 mac, Moz mac, Opera7.23/winXP and Opera 7.5b1 mac. Does not work in Opera 6mac. Untested: Safari, IEwin, Moz win. Opera6 win. |