I'm trying to create a chat room with emoticons. When a user types an emoticon such as :) in the chatroom, the CSS takes the proper image off the sprite sheet. But my code only seems to work in Opera and IE (odd combination). It doesn't show in Firefox or Chrome (if you manage to hone in exactly where the image should be, you can find the image blank.gif which is used as the stand-in to place the background-url over). Does anyone know what might cause this in Firefox/Chrome?

Site: ttony21.byethost24.com

Relevant CSS:

image.emo {
  width:19px;
  height:19px;
}
image#smile {
  background:url(img/diceSprite.png) 0 0;
}
image#bigsmile {
  background:url(img/diceSprite.png) -19px 0;
}
etc...

Relevant HTML:

<img class="emo" id = "smile" src="img/blank.gif" width="1" height="1" alt=":)" title=":)" />
<img class="emo" id = "bigsmile" src="img/blank.gif" width="1" height="1" alt=":D" title=":D" />
etc...