I'm using Tapestry to create pages for a web app, and have been using the palette component to add/delete items to/from a group.

The page looks great in Firefox (Tapestry seems biased towards Firefox), but my customers will all be using Internet Explorer (any versions from 6, 7, & 8) and in IE8, the disabled arrow buttons look awful. In Firefox, they are faded, using an opacity setting of 25%, but this doesn't work in IE8 and instead you get a faded image with an ugly black border around the image.

In tapestry-core's stylesheet (default.css), you have the following for a disabled arrow button.

DIV.t-palette-controls BUTTON[disabled] IMG {
    filter: alpha(opacity = 25);
    -moz-opacity: .25;
}

These are clearly out of date, as -moz-opacity is no longer supported by Firefox (use opacity: 25 instead). The problem is with filter: "alpha(opacity = 25);". If I remove this, the arrows look fine in IE8, but they are not faded.

I got the magic instruction:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=25)";

from various websites, but putting this in does not work either - the arrow icons are ugly again.

The icon itself (distributed with Tapestry) just seems to be a regular PNG, but I'm not an expert on image formats, so maybe there's a problem there?

Anyone else had this problem?