CSS3 PIE not working properly in IE8

Question

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?

what do you mean by this? Does the CSS not look correct to you? — Nick, Sep 24 '12 at 19:56
Try setting `position: relative` on the elements that PIE isn't working on. — daGUY, Sep 24 '12 at 21:10
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, Sep 24 '12 at 21:24

score 1 · Answer 1 · answered Oct 31 '12 at 11:41

1

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

answered Oct 31 '12 at 11:41

defau1t

10,593
2
35
47

score 0 · Answer 2 · answered Dec 28 '12 at 17:55

0

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

answered Dec 28 '12 at 17:55

asiby

3,229
29
32

CSS3 PIE not working properly in IE8

2 Answers2