We did the HTML/CSS for a client of ours and as they wanted all of the CSS3 niceness to work on Internet Explorer 8 we used PIE bridge the gap.

Everything looked great in the initial testing/ deployment phases but now they've added more content to their website a strange thing is happening on some of the pages.

When viewed in IE8 (I'm using a virtual machine running XP/IE8) some of the drop shadows are rendered outside of the image, or behind the image and appear as dark grey blocks - sometimes overlapping existing text. There appears to be no pattern or consistency for how the shadows are rendered.

Here's the live page: http://www.horowhenua.govt.nz/Living/About-Horowhenua/District-Image-Gallery/

Here's a screenshot from IE8: http://img402.imageshack.us/img402/6263/pieshadowsimagegallery.png

To make things more complicated the shadows appear properly if the page is refreshed.

Any possible solutions appreciated.

I commented on this over on stackoverflow, but here's my response again: I can't reproduce this issue in IE8, all the shadows appear correctly for me even after reloading multiple times. They display incorrectly in non-IE browsers, however.

Hi Jason

Thank you for the reply. I posted over here as I'd had no luck with Stack Overflow beyond your comment.

The inconsistency of the problem is a real headache, we can only get it to appear on our virtual XP/IE8 machine on first load, and then it's fine.

What are you seeing in modern browsers? We haven't seen any problems in Chrome, Firefox and Safari on multiple machines.

Cheers
Tama

Here's what I see in Firefox. Chrome is similar. http://cl.ly/image/3z2r0V3R3w3B

It looks like the shadows are being clipped due to overflow:hidden on their parent. I assume this is not intended.