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.