AbsoluteLayout, z-order and IE 7

We’ve been working on our Vaadin-based app for several months and have only recently gotten to testing on older browsers. IE 7 has proven to be a problem and we’ve tracked it down to the way we’re using image backgrounds and the
AbsoluteLayout
class. Every screen in the application has a custom background and we’ve been “stacking” our widgets on top of the background – pretty common practice.

Our “stacking” method has been to first create an
AbsoluteLayout
, then add an
Embedded
component (with the background image) to it at 0,0. The rest of the components are then added to the layout, and the z-order is automatic based on the order in which that is done.

With Firefox, Chrome, Safari and IE 8 & above, the page renders properly. IE 7 is the oddball in that none of the widgets appear, other than the initial background. Even poking the css
z-index
field of the added widgets does not have any effect.

Our (time-consuming) work-around has been to eschew the
AbsoluteLayout
class, and to apply our background through the css
background-image
field to the layout container.

So the questions:

  1. Anybody had a similar experience?
  2. If yes, do you know for certain that it is a result of an IE 7 render bug that Vaadin/GWT has not been able to work-around?
  3. Is this something that should be handled through a Vaadin ticket/bug report?

Thanks in advance for any advice.
Mike Bailey

Further information: We had been basing our theme upon Chameleon-green. Using Runo instead “fixes” our problem. I say “fixes” because, while all gui elements now appear, their positions are mis-aligned. My guess is that readjusting positioning will make the widgets sit properly on their backgrounds and the app will be as good as new.

Hope this experience helps somebody else.

Yes, I would like a small test case that uses the Chameleon theme and exhibits this problem. I can’t really figure out from your post where it might go wrong.

Thanks for the report.