I love PIE! It helps me get the effects needed in IE when IE won't usually allow those CSS3 effects.

However, I've run into a couple of bugs in PIE that maybe (a) you can tell me what I'm doing wrong, or (b) fix PIE so it doesn't have these effects.

1. PIE causes an overlapped DIV to push borders aside. This is hard to describe, so maybe it's best if you just go look at it. The page without PIE applied is at http://www.natcheztracevillage.com/resbiz.html. This same page WITH PIE applied is at http://www.natcheztracevillage.com/resbiz2.html.

In the PIE-affected page, you can see the entire text area left border has been pushed right to clear the left border of the menu DIV. It's supposed to underlap it as it does on the non-PIE page, and indeed, it does this on Chrome, Firefox, and non-PIE IE.

Suggestions? Or is this something in PIE that needs to be fixed?

2. PIE Causes some background colors and borders to be bleached out. If you look at http://www.natcheztracevillage.com/resbiz3.html, scroll down to the first inset box, and compare it to the inset box just below it (which does NOT have PIE applied), and you can see the differences. The ONLY difference in the CSS between these two inset boxes is that the bleached-out box has PIE applied.

Suggestions? Or is this something in PIE that needs to be fixed?

Oh, by the way, even curiouser, if I apply PIE to both DIVS in bug 1 and bug2 above, then the bug2 anomaly goes away! Go back to http://www.natcheztracevillage.com/resbiz2.html and look at the first inset box. You'll see that the PIE effects are working there, with a dropshadow on that box, however, there's a curious additional bit of background color OUTSIDE the border on that box that shouldn't be there.

Curiouser and curiouser.

Thanks for any help you can render.

David in Mississippi

Both these issues are manifestations of the things described on the Known Issues documentation page.

Bug #1 is due to the fact that PIE has to apply hasLayout to the element. That triggers a rendering mode in IE which is buggy about certain things, and the shifting of the box to avoid the floated menu is one of them. You can see this by adding zoom:1 to the element in the page without PIE applied.

Bug #2 is due to the z-index issue. Because your inset box element does not have position:relative, the PIE rendering element gets z-index:-1 which makes it disappear behind the background of the parent box. (When you apply PIE to the outer box, that actually removes the outer box's real background which allows the inner box's rendering to show through, which is why you see it start "working".)

By the way, there are some border styles which are not yet implemented correctly in PIE, including inset. See https://github.com/lojjic/PIE/issues/#issue/10