filter:none attribute

[yavery]

Hi,

When a MenuButton has the showMenuButtonImage attribute set to true, the ISC framework seems to apply
a filer:none attribute.

In IE, this causes the look to be different between the 2 types of menu buttons (whether the property is set
or not). The font doesn't look the same, etc ... FF doesn't seem to expose this behavior.

How can I have both menu buttons look the same, whether or not I set the showMenuButtonImage property.

If all menu buttons would either have the property set or not, this wouldn't be much of an issue, but since I
use both and they are side-by-side, it does look odd ...

PS: We also noticed a similar behavior with the HTMLPane component.

Use the following example to reproduce (in IE only - works fine in FF). See attached screenshot from IE.

http://www.smartclient.com/#fullMenu

isc.Menu.create({
    ID: "menu",
    autoDraw: false,
    showShadow: true,
    shadowDepth: 10,
    data: [
        {title: "New", keyTitle: "Ctrl+N", icon: "icons/16/document_plain_new.png"},
        {title: "Open", keyTitle: "Ctrl+O", icon: "icons/16/folder_out.png"},
        {isSeparator: true},
        {title: "Save", keyTitle: "Ctrl+S", icon: "icons/16/disk_blue.png"},
        {title: "Save As", icon: "icons/16/save_as.png"},
        {isSeparator: true},
        {title: "Recent Documents", icon: "icons/16/folder_document.png", submenu: [
            {title: "data.xml", checked: true},
            {title: "Component Guide.doc"},
            {title: "SmartClient.doc", checked: true},
            {title: "AJAX.doc"}
        ]},
        {isSeparator: true},
        {title: "Export as...", icon: "icons/16/export1.png", submenu: [
            {title: "XML"},
            {title: "CSV"},
            {title: "Plain text"}
        ]},
        {isSeparator: true},
        {title: "Print", enabled: false, keyTitle: "Ctrl+P", icon: "icons/16/printer3.png"}
    ]
});

isc.MenuButton.create({
    ID: "menuButton",
    title: "WKA",
    width: 50,
    menu: menu
});

isc.MenuButton.create({
    ID: "menuButton2",
    title: "WKA",
    width: 50,
 showMenuButtonImage  : false,
    menu: menu
});

isc.HLayout.create({
members : [menuButton, menuButton2]
});

[Isomorphic]

There's a native bug in IE where use of filters causes text not to be antialiased. Unfortunately the filters are required to get .png transparency (we're aware this is directly supported in newer IE, unfortunately, there is no approach that also works with opacity other than continuing to use filters for .pngs).

The only way to get around this is to use a .gif file for the menu button down image instead, which you can do as an ordinary skin change.