views:

1422

answers:

4

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>

#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.

A: 

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.

Patrik Hägne
hmm.. why's this voted down ?
andyk
Yeah, I really can't see the reasoning behind this down vote either.
Patrik Hägne
I voted it down because its not the best way around, for starters it uses extra markup, the span tag has nothing to do there. And as Davy Landman said, display: none; has some downsides.
Espen Christensen
I'm sure that you shouldn't down vote because it's not the ultimate solution, I think you've totally missed the point of why voting down. Just don't vote up.
Patrik Hägne
"Above all, be honest. If you see misinformation, vote it down. Insert comments indicating what, specifically, is wrong. Even better — edit and improve the information! Provide stronger, faster, superior answers of your own!"display:none, may fail in screen readers, so I interpreted it as wrong...
Espen Christensen
Not a single one of the imperatives in that sentence did you follow. To classify my answer as being "wrong" is a stretch, to say that it's misinformation is an even greater stretch. I agree, it may not be the ultimate solution, but it's definitely an acceptable solution.
Patrik Hägne
+2  A: 

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>
Peter Boughton
you missed a closing angle bracket in the </a> tag
bandi
Thanks, not sure how I missed it myself. :(
Peter Boughton
A: 

@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.

Davy Landman
If the screen readers ignore it that's perfect, then the text content would be read back, that's just what we want, can't see what's negative with that. It seems that there are even better techniques though in the list though.
Patrik Hägne
@Patrik: the screen readers ignore it as in, don't read the text.. (Because display:none is also used to hide html parts for legitimate reasons)
Davy Landman
OK, I misunderstood you then. As I said, there seems to be better techniques than mine nowadays anyway! I'm a bit old school obviously. ;-)
Patrik Hägne
+3  A: 

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.

Espen Christensen