Sam Brown

#93 20th March 2005 at 7pm Article Leave a comment

I have been trying to find a good CSS Image Replacement Technique for a while now. The things you think are really simple end up being really difficult thanks to IE. What I wanted from this Image Replacement Technique was the following:

• Image when user has CSS enabled
• Heading text (h1) when CSS is disabled
• Link both Image or Heading text to home.
• Be centered in the header box

Now, this may seem simple, but to get all browsers to play along nicely was a nightmare. It now works in IE PC, Netscape PC, Firefox PC, Safari Mac, Opera Mac, Camino Mac, Firefox Mac, and looks a little quirky but ok in IE Mac.

So here is the HTML:

1. <div id="header">
2. <h1><a href="http://sam.brown.tc" title="Home">sam brown tc</a></h1>
3. </div>
4. Download this code: /code/iecsshacks_html.txt

and the CSS:

1. #header {
2. background: transparent url(/img/header.jpg) center no-repeat;
3. height: 120px;
4. text-align: center;
5. }
6. /* IEMAC Backslash Hack \*/
7. #header h1 {
8. background: url(/img/logo.gif);
9. height: 26px;
10. overflow: hidden;
11. text-indent: -100em;
12. width: 193px;
13. position: relative;
14. top: 45px;
15. left: 271px;
16. _left: 0;
17. }
18. /* End Hack */
19. #header a {
20. color: #fff;
21. display: block;
22. height: 26px;
23. }
24. Download this code: /code/iecsshacks_css.txt

Note: The IE Mac hack breaks my code colour coding.

Now, because of the text-align: center; in the #header div, IE PC puts the relative positioned #header h1 271px left of the center, instead of left of the div like every other browser. Bad IE PC So to fix that we have an _left: 0; which IE PC reads but no-one else, thank goodness.

Then IE Mac, it doesn’t like displaying the logo as a background image and thus leaves no logo and no link in the header, great! Bad IE Mac So everything in the #header h1 is placed inside a backslash comment hack which IE Mac can’t read. Thus it just leaves the heading text centered at the top of the div, good enough for me!

With IE now fixed, the Image Replacement Technique does the rest, it offsets the heading text way off to the left so you can’t see it, places the logo in the background centered on the header, and creates a link, the same size as the logo right on top of it.

So when CSS is enabled, the logo is a link and displayed in the header, and when CSS is disabled the heading text is a link home. Hooray, but none of that was necessary if IE just did its job properly!