Question

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.

Answer 1

The best answer would probably be: “There are some things about IE6 and IE7 that are pretty broken with no easy fixes. This appears to be one of them.”

Obviously that isn’t a great answer, so here’s what I might try. Instead of inserting the shadow as an absolutely-positioned child of the element, I’ll wrap the element using jQuery’s wrap() function.

$(document).ready(function(){
    $('.has_shadow').wrap('<div class="ie_shadow"></div>');
    $('.ie_shadow').each(function(){
        var childwidth = $(this).children('.has_shadow').css('width');
        $(this).css('width', childwidth)
    });
});

Now the only challenge is making the parent element have the same width as its child. Floating it left works, but it has the potential to completely destroy the pre-existing design of the page. It might be possible to find the child’s width using javascript and set the parent to the same value, but this only really works if the child actual has a defined value. I’m still playing around with this, but it looks like this is the best answer I’m going to get. 😉