CSS Multiple Backgrounds not working on IE8

Question

I have the following CSS class defined:

.box .login {
    border: 0;
    float: right;
    clear: both;
    height: 48px;
    background: url(../images/submitr.gif) no-repeat right;
    line-height: 20px;
    padding: 12px 42px 16px 23px;
    margin: 8px 22px;
    color: #FFF;
    font-weight: bold;
}

The multiple background are working perfectly on Chrome, Firefox, Opera, Safari, and IE9. However, they're not working on IE8. Does anyone know why that is?

(if I only have one background, it DOES work on IE8. It's when I start introducing those other backgrounds that it starts to flip out.)

Thanks for the help! I really appreciate it :)

Answer 1

Multiple Backgrounds is a CSS3 specification. IE8 DOES NOT understand CSS3, and IE9 for that matter doesn't understand it all. To get it to work in older browsers you'll have to combine the images into one, or overlay multiple elements to get them all to display on top of one another. z-index: is your friend :-)

Answer 2

Well, I'm a tad late I guess, but there are ways to have multipe backgrounds with CSS2.1 which work in IE8:

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/