Getting shadow text to work in IE

Question

After finding a similar question on SO, I still am having problems. Here is my CSS:

        .title {
            position:absolute;
            bg-color:#FF0000;
            z-index:10;
            width:100%;
            height:100%;
            font-size:250%;
            color: #FCD116;
            text-shadow: 2px 2px 3px #555;
            filter: dropshadow(color=#555, offx=1, offy=1);
            zoom:1
        }

In Google Chrome, the shadow is only offset by about 2 pixels. This is exactly what I want. In IE, however, the shadows are super far away (relative to what I want) and chunky. I've set the offx and offy to one. Why isn't this working? I've never used this method before, I just found it now while looking at the suggestions on SO with my title.

AS A SIDE NOTE

While I am asking, does anybody know how to get IE to let me do transparent images? I tried to put a semi transparent image (a button with a drop shadow) but the shadow is dark black and it gives the appearance that the quality has been compromised. I'll award points for this question (if answered) :)

Answer 1

Main issue - you need to use a full 6-character HEX value - i.e. #555555 - inside the filter.

Side issue - personally I've found Drew Diller's belated_png script to be a quick and reliable solution. Drop in the script, and apply a png_bg class to anything you want to have alpha transparency.

PS - http://jsfiddle.net/peXwY/

.title {
    position:absolute;
    bg-color:#FF0000;
    z-index:10;
    width:100%;
    height:100%;
    font-size:250%;
    color: #FCD116;
    text-shadow: 2px 2px 3px #555;
    Filter: DropShadow(Color=#555555, OffX=2, OffY=2, Positive=1);
    zoom:1
}