CSS: Image Replacement without text-indent

Using a image replacement technique I found in a video on youtube, by nettuts I believe. Should work even in IE6

by rtgibbons

HTML

<div class="hello ir">Hello</div>

CSS

.hello {
    background-image: url(http://sacredland.10.forumer.com/images/smiles/sacredland/hello.gif);
    width: 49px;
    height: 41px;
}

.ir {
    border:0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background-color:transparent;
}