Someone contacted me recently and asked me how to do a CSS image replacement for an H1 header tag and still have it link somewhere and validate too.
Far be it for me to discourage someone who not only wants their H1 header tags to look cool but, here is someone who is also concerned about accessibility AND validation – I had to try to help! After I had helped this person, I was curious to see how easy the solution would have been to find by himself, if he had only googled first.
I was astounded to find this same question being asked all over the web and so thought I’d post an article on how I done it with these specifics given to me by the guy asking the question.
I know off the top of my head, about 7 different ways to do image replacement with CSS. Each has their own pro’s and cons and it’s really up to you as the designer to acknowledge your audience and make the sensible choice based on your own research.
In this instance, he wasn’t wanting to hear, “well, you’d be better doing it this way…” He had what he had, already and wanted this way to work. So, on we go…..
What he had!
He had an XHTML Transitional document with a basic H1 tag:
<h1>my logo text</h1>
He was using the text-indent method in his CSS to replace that text with an image.
#header h1 {
background-image:url(../_images/header_h1.gif);
background-repeat:no-repeat;
height:21px;
width:339px;
position:absolute;
left:30px;
top:54px;
text-indent:-9999px}
So, what’s the problem?
The problem is that when you use the text-indent method, in this case, the text was going 9999 pixels off screen to the left as it’s meant to however, his link that he attached to his text was also going off the page by 9999 pixels and therefore, there was nothing to click or hover over. Essentially, it was just a background image showing and nothing else.
Now, the first thing he tried was to add a <span> inside his H1 tag and attach the link to that. Of course that would work but, it will not validate. You simply cannot have a span tag inside of a header tag. It aint good XHTML grammar folks.
The Solution:
You simply add the link anyway and then bring it back in using absolute positioning to sit on top of your H1 background image.
<h1><a href="/index.html" title="home"></a>my logo text</h1>
notice the blank link
Now, using CSS again, you add the behaviour of that link tag:
#header h1 a {
height:21px;
width:339px;
position:absolute;
left:0px;
top:0px;}
Keeping the same sizes as your H1 background image, you make the “a” tag, which is now inside your H1 tag, sit at the top left of your H1 tag.
Now, when you view it and hover over your fancy new H1 tag, your pointer changes to the familiar link pointer and all is good with the world again. Yep, and it validates just fine too. 
Easy fix but, it sure has caused a lot of people some trouble. Hope it helps you too.
