Image Replacement

I tend to use a large negative text-indent...

I don't use the text-indent... not because Google cares, but because someone may show up with images off. Now they see nothing. I guess they can swirl their mouse around, if they're mousers, until they see the little hand...

Gilder-Levin is a good one, as far as it's pretty safe for both screen readers, sighted folks with CSS on but images off (like dial-uppers), teh googles, and everyone else. Basically your text remains where it should, but then an image is sat right on top of it. It has 3 problems though.

If the image is semi-transparent or something, the text will show through, which you don't want.

It's a small pile of extra code. Text and then each id may get its own styling in the CSS.

Text-enlarge will either show the text peeking out from behind the image, or, if you set overflow to hidden to stop this, then those who need to enlarge the text who have images off see cut-off letters (or no text at all).

I tend to be old school. I'd use the button image in the foreground with appropriate alt text. E.G.

<ul>
  <li><a href="#"><img src="home-btn.jpg" alt="Home"></a></li>
  ...
</ul>

The only problems I've found are 1) you need javascript if you want to switch images on hover, etc.*, and 2) it lacks the kewl factor.

cheers,

gary

* I think it's important to indicate hover, active, and focus conditions. There are simple css methods for doing so effectively without an image switch.

Don't remember the exact title of this method think it's shea enhancement..but it attaches the image to the span leaving the text behind the image. And then add overflow hidden so the text doesn't spill over the image when it is resized. The text is still in the correct spot with images turned off. I like this method because it leaves the text in place but if you are looking for something with less code the negative text-indent is always good but not with the images off.

<li><a class="button3" href="contact.html" title="Contact Info"><span></span>Contact Info</a></li>

#nav_main a.button3 span {
background-image: url(images/button_contact.gif);
}
.button3 {
	overflow:hidden;
}
a.button3 {
	width: 110px;
	height: 31px;
	position: relative;
}
a.button3 span {
	width: 100%;
	height: 100%;
	position: absolute;
}

That's Gilder-Levin. The Shea enhancement is the title being added lawlz.

For Gary's version I'd prolly use a transparent image and a sliding background image. I used this for a form with

Thanks to all you guys for your help.