Saturday, October 29, 2011

Fix for CSS opacity in Internet Explorer

How to set CSS opacity in Internet Explorer? It's easy for good browsers like Firefox, Google Chrome or new IE9:
opacity: 0.5;
For old Safary versions you probably also need
-khtml-opacity: 0.5;
For IE6, IE7 you can write
filter: alpha(opacity=50);
and for IE8
-ms-filter: "alpha(opacity=50)";
Saidly, but filter with opacity value in IE isn't enough. Element should be positioned, in order that opacity would work in IE. If the element doesn't have a position, there is a little trick in order to get it working. Add 'zoom: 1' to your CSS.
filter: alpha(opacity=50);        // IE6, IE7
-ms-filter: "alpha(opacity=50)"; // IE8
zoom: 1;
I have faced this problem with Schedule component in PrimeFaces. The button "today" is not disabled in IE7 for the current day although it has the jQuery UI style .ui-state-disabled. The fix would be
/* IE7 hack */
div.fc-button-today.ui-state-disabled {
    *zoom: 1;
}
* means the style is applied for IE7 only.

2 comments:

  1. i have used filter: alpha(opacity=50); in ie6, even then it does'nt work.

    ReplyDelete

Note: Only a member of this blog may post a comment.