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:

.toppanel{
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}' />
</g:north>

Any suggestions?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.