I tried adding overflow:auto; zoom:1; to the style attribute of ace:datatable and it is not fixing the issue.

This is a problem with every scrollable container for any ace:dataTable in IE7. Zoom must be applied to the container with the scrollbar- not simply wrapping it. No change to the table would fix the issue other than complete header redesign, without using positioning, which has been necessary to enable many of the layouts requested.

The issue must be fixed at this point by correct styling of the scrollable container.

Adding the recommended fix to the issue:

The fix is the same everywhere. Find some notable attribute of the element with the scrollbar- horizontal or vertical, and use that, or give it an ID and write an in page css rule that adds zoom:1. If the zoom 1 is placed correctly, all of the header + scrolling rendering issues are corrected.

If you knew where the tables were going to be scrolled you could add a more general rule to a app-wide css doc.

It turns out after more testing that zoom:1 is not sufficient to fix this bug, though it does change the behavior.

The proper fix is to add position:relative to the container. In the case of screen2.xhtml to the div .screen2DataTable.

For every app that seeks to be IE7 compat, if the table is designed to overgrow its parent, that parent should have position relative set.

Ex.
<style type="text/css">
.screen2DataTable

</style>
<ace:container styleClass="screen2DataTable" ...

or more intelligently styling by adding a "scrollable fix rule" to some global css file and ...

.ie7OverflowFix

<ace:container styleClass="ie7OverflowFix" style="overflow:auto; width:x; height:x;">
<ace:datatable ...

Need to document this technique in the Wiki.