CSS Compatibility on IE. Box shadows

Question

I'm creating a website and I need to style some boxes like this image here. Although, their height aren't fixed for it's dynamic content I used -webkit-border-imageand -moz-image-borderand it worked perfectly. Unfortunately, IE is a bad bad guy and I wanted it to appear properly.

I thought about using CSS3 with box-shadow and -webkit-gradient and -moz-linear-gradient but again IE doesn't work.

I'd like to know some CSS technique so that I can have the gradient box and the shadows within a div with undefined size (I mean dynamic height and width)

Answer 1

Here is the possible solution :)

Answer 2

If the width is fixed, and the background is homogenous, this will work even on IE6:

1. Take the picture, cut out the middle gradient/white, make it transparent (the shadows should remain opaque), grey to white. Cut it into 2 pieces - the top part which can be stretched to any height without change to looks, and the bottom part with rounded corners (bg-mid.png and bg-bottom.png)
2. The top gradient part is also cut as a high, 1 pixel wide image.
3. Write this HTML code:

<div class="gradient-bg">
    <div class="top-content">
        your content
    </div>
    <div class="bottom-shadow">
    </div>
</div>

Then, style them accordingly. Place the gradient image as the top div Background, the bg-mid.png as the top-content background (with repeat-x), and the bottom shadow - that's bg-bottom.png.

For IE6 you'll need to use conditional CSS statements, and filter CSS attribute to load images with alpha channel.