CSS3 PIE not working properly in IE8

3
votes

I am using CSS3 PIE to render border-image and border-width in IE. Everything works OK in IE9, but not in IE8.

Strangely, in IE8 the border-image/width works on one DIV (the mailing list at the top right of the page), but not for others (the main content and sidebar, for which no border-image or background-image is showing).

You can see what I mean on this page.

An example of the CSS I am using (in this case for the content DIV) is as follows:

div#content .padder {
    border-width:7px;
    -moz-border-image:url('/wp-content/themes/bp-soteria/images/background_content.png') 7 repeat;
    -webkit-border-image:url('/wp-content/themes/bp-soteria/images/background_content.png') 7 repeat;
    border-image:url('/wp-content/themes/bp-soteria/images/background_content.png') 7 repeat;
    -o-border-image:url('/wp-content/themes/bp-soteria/images/background_content.png') 7 repeat;
    background-image:url('/wp-content/themes/bp-soteria/images/background-main.png');
    background-repeat: repeat;
    background-clip: padding-box;
    behavior: url(/pie/PIE.htc);
}

The path to PIE.htc is correct. Can anyone suggest what the issue is here?

2
internet-explorer-8css3piecss
I have cleared the cache and still see the same issue - Nick
what do you mean by this? Does the CSS not look correct to you? - Nick
Try setting position: relative on the elements that PIE isn't working on. - daGUY
Thanks, that's working now. Strange, it worked in IE7 without the position:relative. Will you add an answer that I can mark as correct? - Nick

2 Answers

1
votes

The PIE Specs say:

make the target element position:relative, or
make the ancestor element position:relative and give it a z-index.

Known Issues

0
votes

Try using a path relative to the root of your site. It's the only thing that worked for me.

behavior: url(/your/path/to/PIE.htc);

The following did not work for me

behavior: url(PIE.htc);
behavior: url(../../some/path/to/PIE.htc);