CODEWITHSUNDEEP
cssinternet-explorer-8
Sebolains
Sebolains

Reputation: 782

CSS Multiple Backgrounds not working on IE8

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 :)

Upvotes: 6

Views: 18416

Answers (3)

AJMaxwell
AJMaxwell

Reputation: 384

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 :-)

Upvotes: 9

Tomm
Tomm

Reputation: 2142

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/

Upvotes: 8

Jim
Jim

Reputation: 73936

Internet Explorer 8 doesn't support CSS 3 multiple backgrounds.

Upvotes: 2

Related Questions