Sprite buttons won't work in IE - sometimes . . .

I HATE IE!

/tantrum

okay, having an issue with some css I provided to a client who works in C# with visual studio (not sure that matters but I stick it in cuz it may) If you look here: http://emendationslist.com/rslsprite/sprite.html ON IE you will see that the button shows only two states - link and hover- any ohter browser will show you the link, hover and active. (View source for CSS - Jeremey just stuck it there to show me the problem)

Look HERE - where I demoed the button idea: http://emendationslist.com/jerequest/jerelements.html and under button sprites you'll see all THREE states in all browsers.

The main diff in the css is that I am using line height to get a horizontal alignment in the text, since it's always short. (my css below) Jer is using 'table-cell' in his parent div. i've tried a number of changes in both css sets - including using or not using normalize.css (a reset) with no luck. Can you see why jer's version of the button won't work in IE?

.button-sprite { background: url(../images/turq-sprite.png) no-repeat; width: 160px; height: 35px; background-position: 0px 0px; color: #FFFFFF;!important font-family: Arial, sans-serif; font-weight: bold; text-indent: 15px; line-height: 36px; } .button-sprite:hover { background-position: 0px -46px; width: 160px; height: 35px; color: #eef9fc;!important font-family: Arial, sans-serif; font-weight: bold; text-indent: 15px; line-height: 36px; }

.button-sprite:active { background-position: 0px -92px; width: 160px; height: 35px; color: #EEEAEF; !important font-family: Arial, sans-serif; font-weight: bold; text-indent: 15px; line-height: 36px; }