CSS text replace with image, need hyperlink

Question

I am using the text-indent technique to replace my <h1/> tag with my website's image as so:

<h1 title="Homepage">My logo</h1>

CSS:

#header h1 {
    float: left;
    background: transparent url('../images/logo.png');
    width: 214px;
    height: 64px;
    text-indent: -9999px;
}

The only problem is that I want to still have the new image act as a hyperlink. I tried doing:

<h1 title="Homepage"><a href="#">My logo</a></h1>

But since it is being indented, the link is too. I wanted to know if anyone had any suggestions on how to do this and still be valid XHTML.

EDIT I'd rather do it in a way that is accessible to users with screen readers, from what I read, doing a display:none will not work with some readers.

Answer 1

There are many ways to do this, this is the way that I prefer, it works well, and is easy to implement.

<div id="header">
    <h1><a href="/" title="Homepage">Homepage</a></h1>
</div>

Then i do this css, this is also know as the "Leafy/Langridge image replacement" method

#header h1 a {
    display: block;
    padding: 22px 0 0 0;
    overflow: hidden;
    background-image: url(../images/sidebar/heading.png);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:22px;
}

The only thing you should have to edit is the height, and the padding-top. In this example it is 22px, this should be equal to your image-height.

Answer 2

Why are you mucking about with negative indents - just use the alt attribute of the img tag?

<h1 title="Homepage><a href="#"><img src="images/logo.png" alt="My logo"/></a></h1>

Answer 3

@Partrik Hägne: You should't use display:none, because some screen readers will ignore that...

You can see a list of Nine Techniques for CSS Image Replacement on http://css-tricks.com, which describes the cons and pros for each solution.

Answer 4

What you can do is remove the indent. And use a span to hide instead:

<h1 title="Homepage"><a href="#"><span>My logo</span></a></h1>

#header h1 span
{
  display: none;
}

You might have to set the width and height of the A-tag also since nothing fills using this trick.