IE8 TabSheet only shows half of Table

Hello everyone

I have a strange problem with Vaadin 7 in IE8. In my application I have a Table inside a TabSheet.

[code]

public class MyUI extends UI {

@Override
protected void init(VaadinRequest request) {
    VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    setContent(layout);

    TabSheet tabSheet = new TabSheet();
    layout.addComponent(tabSheet);

    tabSheet.addTab(new TabComposite(), "Tab");
}

public class TabComposite extends CustomComponent {

    public TabComposite() {
        VerticalLayout mainLayout = new VerticalLayout();
        setCompositionRoot(mainLayout);

        HorizontalLayout horizontalLayout = new HorizontalLayout();
        horizontalLayout.setWidth("100.0%");
        horizontalLayout.setSpacing(true);
        mainLayout.addComponent(horizontalLayout);

        CheckBox checkBox = new CheckBox();
        horizontalLayout.addComponent(checkBox);

        Label label = new Label("Label");
        horizontalLayout.addComponent(label);

        Table table = new Table();
        table.setWidth("100.0%");
        mainLayout.addComponent(table);
    }
}

}
[/code] If I open the application in IE8, the Table is cut off in the middle, see attachment ‘table_not_ok.PNG’. If I then click the CheckBox, the rest of the Table appears as shown in ‘table_ok.PNG’.

If I remove horizontalLayout.setSpacing(true) everything works fine. Or if I remove horizontalLayout.setWidth("100.0%") everything also works fine.

Can anyone tell me what is going on here? Thank you in advance!
13209.png
13210.png

http://dev.vaadin.com/ticket/12687