How can I position a child element behind its parent in IE7 and earlier

I'm trying to create a blurred drop shadow (similar to the CSS3 box-shadow) in Internet Explorer. The most logical way to do this seems to be to find all elements that need a shadow in IE, and inject a new div inside of them using jQuery. This new div will fill the exact same space as its parent, and it can then be blurred using IE's blur filter. The html would look something like this:

<div id="parent">
    <div class="ie_shadow"></div>
    All visible content goes here.
</div>

And the CSS:

#parent {
    position: relative;
    height: 200px;
    width: 200px;
}
.ie_shadow {
    background: #111;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1; /* has to be at least one less than its parent */
    filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3, MakeShadow='true', ShadowOpacity='0.60');
}

This would work perfectly (with a little tweaking to make sure overlapping of different regions works correctly) except for the fact that IE7 and earlier don't seem to let you place a child element behind its parent, regardless of how you set "position" and "z-index".

The other option would be to insert the .ie_shadow div either before or after the box that needs a shadow, but this has some problems of its own. Specifically, there's no good way to set the width (and position) of the shadow unless it is explicitly set by the div that needs a shadow. This method also seems to fall apart if the user resizes the page, as the height and width of .ie_shadow is set explicitly and not recalculated automatically.

Any help is much appreciated. Thanks!

Edit: for a live example, see here: http://martinsmucker.com/demo/ie_shadow.html For those of us no longer blessed with IE7, setting IE8 to display the page in IE7 Standards mode faithfully reproduces the problem.

ansaurus

tags:

views:

answers:

How can I position a child element behind its parent in IE7 and earlier

related questions