Wednesday, June 29, 2011

DocLayouttPanel IE8 Drop Shadows

Hi Everyone,

I have a north, south, east, center layout design and want each area
to have a boxed window with a drop shadow. All seems to work great
with firefox and ie9 using the CSS box-shadow. I want this effect in
ie8 so i add the css property

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,
Direction=135, Color='#000000')";

It appears in the GWT design window properly but when i view it in the
browser nothing appears. Here is an example of the css code i am using
in the ui xml file:

background-color: #DD0000;
border-left: 1px solid #777777;
border-right: 1px solid #777777;
border-bottom: 1px solid #777777;
margin-bottom: 4px;
margin-left: 7px;
margin-right: 7px;
-moz-box-shadow: 2px 2px 2px #444;
-webkit-box-shadow: 2px 2px 2px #444;
box-shadow: 2px 2px 2px #444;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4,
Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4,
Direction=135, Color='#000000');

The style is applied using the following:

<g:north size='60' >
<h:TopPanel ui:field='topPanel' styleName='{style.toppanel}' />

Any suggestions?


You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to
To unsubscribe from this group, send email to
For more options, visit this group at

No comments:

Post a Comment