Firefox Sprite Sheet Image Not Showing Up

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

Answers


change

image.emo {
  width:19px;
  height:19px;
}

to

img.emo {
  width:19px;
  height:19px;
}

and the others follow a similar pattern. The element selector is img, not image


Need Your Help

RIA Services for transmitting non DB object-graph

silverlight wcf wcf-ria-services

I have been getting into RIA services because I thought it would simplify dealing with the services layer of web applications I wish to build. I see lots of examples out there showing how to create

Divide-and-conquer algorithms' property example

algorithm recursion divide-and-conquer

I'm having trouble with understanding the following property of divide-and-conquer algorithms.