The setting of bottom may cause unwanted movement in your image depending on how you’re aligning everything in your specific implementation. 0 0, is the normal alignment, so it makes a good starting point.

I don’t believe Google (the most important crawler anyway) is automatically penalizing overflowed and clipped text. However, if you’re using the technique to hide irrelevant or misleading text, then they will react to complaints and may remove your page(s) or site from their index.

As long as you’re using the text to properly label the image you should be OK. I have used the same indenting technique to label graphical nav buttons that would otherwise produce no output if someone disabled page styling.

The text, even though it’s clipped and not visible, is an assistive service and important for accessibility.

Hiding it vertically as in the second example pretty much accomplishes the same goal and has the same caveats for anyone thinking about using it for trying to cheat robots/spiders.

A friend pointed me to your site while trying to implement a CSS rollover similar to the one I’ve had on my site for the last few years, but with better alpha support for IE. Long story short, he couldn’t get your style to work in IE6.

I just took a look and have found the problem. Unfortuunately you’re missing a critical property to make this work elsewhere.

#buyme_coffee:hover {
background-position: 0 bottom;
}

The example on your own page works only because you have that background property within your main v4 css file on the first hover selector. The example you’ve posted in the zip file and quoted in this post however, will not work as-is in IE6 (works fine in IE7 and non-crap browsers though).

Anyway, it’s a great post otherwise. I’m using something very similar in a template I’ve been designing for another friend. Though I much prefer the times when developing sites without MS compatibility requirements. Much less cruft.

Then in your css you could just use…

#home #buyme_coffee,
#home #buyme_coffee span{
display:block;
width:160px;
height:40px;
position:relative;
overflow: hidden;
}
#home #buyme_coffee span{
height:140px;
background: url(coffee_button.png) 0 0 no-repeat;
line-height: 20px;
white-space: nowrap;
top:-20px;
}
#home #buyme_coffee:hover span{
top:-60px;
}
#home #buyme_coffee:active span,
#hom #buyme_coffee:focus span{
top:-100px;
}

Maybe not exactly how it would go but you get the idea. You would simple change the id of whatever page to activate which ever button you wanted as active.

Now I know, thank you very much :)

I’ll edit the post to show alternate CSS for those wanting to shy away from the text-indent rule.