IE7\8 Doesn't Play Well with Sprites On inputs?

Question

I'm using the css sprite technique to hold all the buttons on the site in one PNG Image.

This technique works fine on all browsers on your normal Style Buttons, however for IE 7/8 it shows a border and a red x on any input where I use a css class to define the image. This technique works fine for Firefox.

Am I missing something here ?

HTML:

http://img85.imageshack.us/img85/7493/spriteerrorhtml.png

CSS:

http://img514.imageshack.us/img514/1382/spriteerrorcss.png

Comparison:

http://img99.imageshack.us/img99/3251/spriteerrorcomparison.png

Answer 1

The "red X" occurs because there is no SRC (or an invalid/not-available resource specified in the SRC) for the IMG element.

You can use a transparent "stub" image to fix that issue. Also, make sure to set BORDER=0 on the IMG as well (guess why :-).

Answer 2

Please try to change the background part from CSS code:

background: url('XXXXXXXX.png')  no-repeat

I think it is a CSS parsing problem