CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-8css3pie
Riya Travel
Riya Travel

Reputation: 727

CSS pie not working in IE 8, but working in IE 9

I am using the following code for border radius:

.box {
     width:250px;
     height:250px;
     background:#ce0000;
     border-top-left-radius: 15px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     border-top-right-radius: 15px;
     behavior:url(images/PIE.htc);
}

It worked fine in IE 9. But it's not working in IE 8. What am I doing wrong?

Upvotes: 4

Views: 408

Answers (1)

SeanCannon
SeanCannon

Reputation: 77966

Per the docs, PIE only supports shorthand border-radius rules:

For all CSS properties which PIE parses, only the shorthand versions of those properties will be recognized. For example, while border-radius is supported, the individual longhand border-top-left-radius etc. properties are not.

The reason for this is the same reason URLs are not resolved relative to the CSS file (see above): PIE does not have visibility into where each style property comes from. If there is both a shorthand and a longhand property present, PIE cannot determine the order in which the CSS author specified those properties, nor can it determine the specificity of the selector for each property. It cannot therefore make an informed decision about which property should take precedence.

To avoid making dumb guesses, we have opted to only support shorthand properties. Shorthand was chosen over longhand to keep file size small and avoid tedious repetition.

http://css3pie.com/documentation/known-issues/#shorthand

So try changing your CSS to this: 

.box {
     width:250px;
     height:250px;
     background:#ce0000;
     border-radius : 15px 15px 5px 5px;
     behavior:url(images/PIE.htc);
}

Upvotes: 3

Related Questions