Problem with Tapestry palette's arrow icons in IE8
- by JellyHead
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?
