Flexible layout templates display disabled buttons incorrectly in ie 7 or ie 8

[zjames]

Buttons set as disabled have a semi-transparent appearance in most browsers. In ie 7 and ie 8, they are not selectable but they appear without any transparency.

Steps to reproduce:

1. Load slate template in ie 7.

2. Bring up the contextual menu by right clicking on the map.

Result:

'Clear Selection' and it's icon should appear with reduced opacity but they appear as normal.

[fwarnock]

JxLib uses css opacity to make menu items, buttons etc appear disabled. IE does not support opacity so an IE filter is used.

The issue lies in how IE7/8 handles applying css filters to children of css floated elements (buttons and menus rely on CSS floating). The filter should be inherited but is not.

The issue was address in JxLib by applying a * selector in the IE specific css so that all children of a disabled element would get the alpha filter.

An ie8.css file needs to be made that contains the following.

.jxDisabled * { filter: Alpha(opacity=50); }

[fwarnock]

Upon closer inspection it appears that the css declaration is as follows for IE 8

.jxDisabled { opacity:0.4; -ms-filter: "Alpha(opacity=40)"; } .jxDisabled * { -ms-filter: "Alpha(opacity=40)"; }

and this should be put into the theme file and not create an ie8.css. The reasoning for this is that these are valid vendor specific declarations where the IE7 syntax is not, and should therefore be put in a ie7 specific css.

[fwarnock]

In r4076 I added the * selector to the ie7.css and the theme css as described above.