GWT: Internet Explorer transparency issue

Question

This post is for IE only. The last line of the following code causes the problem.

    int width = 200;
    int height = 200;
    int overHeight = 40;

    AbsolutePanel absPanel = new AbsolutePanel();
    absPanel.setSize(width + "px", height + "px");      

    SimplePanel underPanel = new SimplePanel();
    underPanel.setWidth(width + "px");
    underPanel.setHeight(height + "px");
    underPanel.getElement().getStyle().setBackgroundColor("red");           

    SimplePanel overPanel = new SimplePanel();
    overPanel.setWidth(width + "px");
    overPanel.setHeight(overHeight + "px");
    overPanel.getElement().getStyle().setBackgroundColor("black");
    //Setting the IE opacity to 20% on the black element in order to obtain the see through effect.
    overPanel.getElement().getStyle().setProperty("filter", "alpha(opacity=20)"); 

    absPanel.add(underPanel, 0, 0);
    absPanel.add(overPanel, 0, 0);

    RootPanel.get("test").add(absPanel);

    //The next line causes the problem. 
    absPanel.getElement().getStyle().setProperty("filter", "alpha(opacity=100)");

So, basically this code should display a 200px red square at 200px (see the sub-panel in the code), and on top of it a black 200px rectangle at 40px (see the overPanel in the code). However, the black rectangle is partially visible, because its transparency is set to 20%, so it should look red, but darker red than the rectangle sitting under it, since it is actually a faded black element.

- , AbsolutePanel 100% ( ). , , , , ! , , , ...

?

GWT 2.0 IE7.

Answer 1

IE7 -. :

absPanel.getElement().getStyle().setProperty("msFilter",   
"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)");

:

http://www.quirksmode.org/css/opacity.html

Answer 2

... GWT 2.4 :

    Style.setOpacity()

( ie6, ie7, ie8)

Answer 3

You can also enable IE9.js ( http://code.google.com/p/ie7-js/ ) from Dean Edwards, it allows you to use the opacity property for your css classes (and many other interesting things, like using pseudo selectors! ) I have successfully used it in several GWT-based projects. I would also set the CSS class (setStyleName ()) instead of setting the inline style of the user interface element.