If there are any CSS gurus who read this blog, I need your advice.

I updated Cerulean Sanctum a few weeks back, but I’m having a terrible time resolving a display issue for users of IE. In Firefox, the banner at the top of the blog uses text-shadow to create the drop shadow behind Cerulean Sanctum. IE does not recognize this standard CSS call, instead relying on IE filters to create the effect. The CSS call that I modified in my theme’s child theme is


#blog-title {
font: 7em Carolingia,serif;
text-shadow: 2px 2px 2px black;
letter-spacing: -2px;
padding: 40px 0 0;
margin-top: 30px;
background: url("images/cs_banner_2.jpg") left 1px no-repeat;
}

That works fine, but when I try to add the shadow IE filter after the text-shadow call, the filter adds the shadow to the banner image, not to the text. I find this bizarre because text-shadow handles this perfectly.

Anyway, if anyone has insights, I really want to help people better read the blog title in IE, and a drop shadow looks great, just like it does in Firefox.

Thanks in advance for your help!