Centered content with drop shadow and a pattern background. Is transparent PNGS the only way to go?

Question

If so, which PNG IE fix would you recommend?

Answer 1

If your drop shadow is partially transparent and can't use a .gif then yes that is really the only way to go. Firstly, I must say the obligatory %^&* IE 6. Second, I have had great luck with http://jquery.andreaseberhard.de/pngFix/ but I loves me some jquery so take this as just personal opinion and if you arn't already using jquery may not be the best for you.

Answer 2

If you do not necessarily need your CSS to validate, you might use this:

.box-shadow {
    -moz-box-shadow: 2px 2px 3px #969696; /* FF 3.5+ */
    -webkit-box-shadow: 2px 2px 3px #969696; /* Webkit = Safari + Chrome */
    -khtml-box-shadow: 2px 2px 3px #969696; /* Konqueror */
    box-shadow: 2px 2px 3px #969696; /* Opera */
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3); /* IE */
}

It uses the box-shadow CSS3 property where appropriate and for MSIE it uses filters. If you can trust your users have updated browser or use IE, you should be safe.

The code is not entirely from my head, I used http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ for reference.