IE GWT: DockPanel center component 100% height style is ignored

fuebysubsSues

New Member
I have as usual a problem with the Internet Explorer and CSS. I'm using with GWT a DockPanel to create a website with a header, a main part and a footer, all VerticalPanels where I add different Composites/Elements during runtime.\[code\] RootPanel rootPnl = RootPanel.get("rootContainer"); final DockPanel dockPanel = new DockPanel(); dockPanel.setWidth("100%"); dockPanel.setHeight("100%"); rootPnl.add(dockPanel); final VerticalPanel headerPanel = new VerticalPanel(); headerPanel.setSpacing(10); headerPanel.setStyleName("gwt-HeaderPanel"); dockPanel.add(headerPanel, DockPanel.NORTH); dockPanel.setCellHeight(headerPanel, "100px"); final VerticalPanel mainPanel = new VerticalPanel(); mainPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER); mainPanel.setStyleName("gwt-MainPanel"); dockPanel.add(mainPanel, DockPanel.CENTER); final VerticalPanel footerPanel = new VerticalPanel(); dockPanel.add(footerPanel, DockPanel.SOUTH); dockPanel.setCellHeight(footerPanel, "150px");\[/code\]As you can see, I added CSS styles. The main panel looks like this:\[code\].gwt-MainPanel { width: 100%; height: 100%; padding: 20px; background-color: #353334; -moz-box-shadow: 0 2px 2px 0px #232323; -webkit-box-shadow: 0 2px 2px 0px #232323; box-shadow: 0 2px 2px 0px #232323;}\[/code\]So i put the height to 100% of the center cell, this is working with Firefox as intended, but the Internet Explorer is ignoring it completely. How can i make the IE filling the center part of the DockPanel also vertically? I searched for it already and tried for example to add different DOCTYPEs to the html page. Please have a look here for the live example.Thank you
 
Top