IE8 PIE.htc and background-color together not working

Question

I have tried PIE.htc and background-color together, but rounded-corner not working in IE8. my css is as follows.

#main{

     background-color: #CD0D00 !important; 
     -webkit-border-radius: 15px 15px 15px 15px; 
     -moz-border-radius: 15px 15px 15px 15px; 
     border-radius: 15px 15px 15px 15px; 
     behavior: url(PIE.htc);
     -webkit-box-shadow: 0 7px 10px rgba(0,0,0,0.3); 
     -moz-box-shadow: 0 7px 10px rgba(0,0,0,0.3); 
     box-shadow: 0 7px 10px rgba(0,0,0,0.3);

}

NB: When I remove "!important" from background-color, the color not appears but the Rounded corner working in IE8, otherwise not.

The cause is explained here: http://stackoverflow.com/questions/12791836/css3-pie-not-working-in-ie8 — jackmcpickle, Apr 02 '13 at 02:43

score 1 · Accepted Answer · answered Oct 25 '12 at 06:37

Well, using !important is known to cause problems with CSS3Pie, so that's no surprise.

As for the background-color on it's own without the !important, I'm not immediately sure why it isn't working, but a few suggestions:

Try using the shorthand background style instead -- ie background:#CD0D00;. CSS3Pie tends to prefer shorthand styles for most things.
For some background properties, CSS3Pie can't support them in the standard background style; it needs a custom -pie-background style. In theory, this only applies to advanced background properties, and shouldn't be needed for a basic background color, but it's worth trying it.

I don't have a copy of IE to hand at the moment to try it out, but hope that helps.

IE8 PIE.htc and background-color together not working

1 Answers1