Opened 9 years ago

Closed 9 years ago

#1038 closed defect (fixed)

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

Reported by: zjames Owned by: fwarnock
Priority: low Milestone: 2.1
Component: Fusion Templates Version: 2.1.0
Severity: minor Keywords:
Cc: External ID:


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.
  1. Bring up the contextual menu by right clicking on the map.


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

Change History (3)

comment:1 Changed 9 years ago by 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); }

comment:2 Changed 9 years ago by 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.

comment:3 Changed 9 years ago by fwarnock

Resolution: fixed
Status: newclosed

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

Note: See TracTickets for help on using tickets.