GWT DockPanel incorrectly formatting with Chrome - html

Question

I am building a departmental website and am running into a unique issue with my dock panel resizing incorrectly, but only with Chrome.
When I change the information inside the center of my dock panel to be something taller it expands correctly, but never resizes back down to fit shorter material. It works perfectly in firefox, IE and Spartan, but not in Chrome. It appears that it is setting the bottom-padding for the center instead of resizing the element.
Here's a link to 3 images on imgur that show the differences.
View post on imgur.com
Here's my code for creating the center container:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
</ui:style>
<g:HTMLPanel>
<g:DockPanel styleName="my-DockPanel">
<g:Dock direction="NORTH">
<g:HorizontalPanel width="750px" styleName="page-header">
<g:cell horizontalAlignment="ALIGN_LEFT">
<g:HTML>
</g:HTML>
</g:cell>
<g:cell horizontalAlignment="ALIGN_CENTER">
<g:Image url="Resources/Images/CSDepartment_Banner.gif" />
</g:cell>
</g:HorizontalPanel>
</g:Dock>
<g:Dock direction="SOUTH">
<g:HorizontalPanel styleName="page-footer">
<g:HTML>
</g:HTML>
<g:HTML>
<DIV align="center">
The Department of Computer Science
<br />
<br />
<br />
<br />
<br />
Last modified: July 1, 2015
<br />
<br />
</DIV>
</g:HTML>
<g:cell horizontalAlignment="ALIGN_RIGHT">
<g:HTML>
</g:HTML>
</g:cell>
</g:HorizontalPanel>
</g:Dock>
<g:Dock direction="EAST">
<g:VerticalPanel width="100%" height="100%">
</g:VerticalPanel>
</g:Dock>
<g:Dock direction="WEST">
<g:VerticalPanel width="100%" height="100%">
<g:Label>
</g:Label>
</g:VerticalPanel>
</g:Dock>
<g:Dock direction="NORTH">
<g:HorizontalPanel width="100%">
<g:cell horizontalAlignment="ALIGN_CENTER">
<g:MenuBar ui:field="navigationBar"></g:MenuBar>
</g:cell>
</g:HorizontalPanel>
</g:Dock>
<g:Dock direction="CENTER" width="1260px" height="100%">
<g:ScrollPanel height="auto">
<g:DeckPanel ui:field="deckPanel" height="100%">
</g:DeckPanel>
</g:ScrollPanel>
</g:Dock>
</g:DockPanel>
</g:HTMLPanel>
</ui:UiBinder>
And here's the CSS for the entire page:
#CHARSET "ISO-8859-1";
/**
* This file is linked through the index.html file
*/
body {
/*background-color: #CCCCCC !important;*/
background-color: #fff5ec;
font-family: "Garamond Premier Pro", "Myriad Pro", "Verdana",
"Times New Roman";
}
/*Adds a drop shadow at the top of the page and stays there.*/
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
z-index: 100;
}
.my-dockPanel {
margin: 0;
padding: 0;
}
.my-dockPanel {
margin: 0px;
padding: 0px;
}
.my-DockPanel td {
padding: 0px;
margin: 0px;
}
.my-DockPanel {
height: 100%;
width: 100%;
border-spacing: 0px;
font-color: white;
}
.page-footer {
height: auto;
width: 1260px;
background-color: #003366;
padding: 0px;
margin: auto;
color: #FFF;
}
.page-header {
height: 100px;
/* display: block; */
margin-left: auto;
margin-right: auto;
}
.blog-title {
font-weight: bold;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background: #555555;
}
.blog-panel {
border-top: 1px solid black;
padding: 2px;
margin-bottom: 6px;
}
.my-ScrollPane {
width: auto;
padding: 0px 0px 0px 0px;
min-height: 641px;
}
.gwt-MenuBar {
cursor: default;
}
.gwt-MenuBar .gwt-MenuItem {
cursor: default;
}
.gwt-MenuBar .gwt-MenuItem-selected {
/* background: #666; */
background: #335685;
color: #0cf;
}
.gwt-MenuBar-horizontal {
/* background: #222222; */
background: #003366;
border-radius: 55px 55px 0px 0px;
-moz-border-radius: 55px 55px 0px 0px;
-webkit-border-radius: 55px 55px 0px 0px;
border: 1px solid #000000;
}
.gwt-MenuBar-horizontal .gwt-MenuItem {
padding: 0px 10px;
vertical-align: bottom;
font-weight: bold;
color: #E0E0E0;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
}
.gwt-MenuBar-horizontal .gwt-MenuItemSeparator {
width: 1px;
padding: 0px;
margin: 0px;
border: 0px;
border-left: 1px solid #bec7cc;
background: #000;
}
.gwt-MenuBar-horizontal .gwt-MenuItemSeparator .menuSeparatorInner {
width: 1px;
height: 1px;
background: #000;
}
.gwt-MenuBar-vertical {
margin-top: -5px;
margin-left: 0px;
padding-left: 2px;
/* background: #4D4D4D; */ /*background: #194775;*/
background: #003366;
color: #E0E0E0;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
opacity: 0.9;
}
.gwt-MenuBar-vertical table {
border-collapse: collapse;
}
.gwt-MenuBar-vertical .gwt-MenuItem {
padding: 4px 14px 4px 1px;
}
.gwt-MenuBar-vertical .gwt-MenuItemSeparator {
padding: 2px 0px;
}
.gwt-MenuBar-vertical .gwt-MenuItemSeparator .menuSeparatorInner {
height: 1px;
padding: 0px;
border: 0px;
border-top: 1px solid #bec7cc;
background: #222;
overflow: hidden;
}
.gwt-MenuBar-vertical .subMenuIcon {
padding-right: 4px;
}
.gwt-MenuBar-vertical .subMenuIcon-selected {
/* background: #666; */
background: #335685;
}
.gwt-MenuBarPopup {
margin: 0px 0px 0px 3px;
}
.gwt-MenuBarPopup .menuPopupTopCenter {
background: url(images/hborder.png) 0px -12px repeat-x;
}
.gwt-MenuBarPopup .menuPopupBottomCenter {
background: url(images/hborder.png) 0px -13px repeat-x;
-background: url(images/hborder_ie6.png) 0px -13px repeat-x;
}
.gwt-MenuBarPopup .menuPopupMiddleLeft {
background: url(images/vborder.png) -12px 0px repeat-y;
-background: url(images/vborder_ie6.png) -12px 0px repeat-y;
}
.gwt-MenuBarPopup .menuPopupMiddleRight {
background: url(images/vborder.png) -13px 0px repeat-y;
-background: url(images/vborder_ie6.png) -13px 0px repeat-y;
}
.gwt-MenuBarPopup .menuPopupTopLeftInner {
width: 5px;
height: 5px;
zoom: 1;
}
.gwt-MenuBarPopup .menuPopupTopRightInner {
width: 8px;
height: 5px;
zoom: 1;
}
.gwt-MenuBarPopup .menuPopupBottomLeftInner {
width: 5px;
height: 8px;
zoom: 1;
}
.gwt-MenuBarPopup .menuPopupBottomRightInner {
width: 8px;
height: 8px;
zoom: 1;
}
.gwt-MenuBarPopup .menuPopupTopLeft {
background: url(images/corner.png) no-repeat 0px -36px;
-background: url(images/corner_ie6.png) no-repeat 0px -36px;
}
.gwt-MenuBarPopup .menuPopupTopRight {
background: url(images/corner.png) no-repeat -5px -36px;
-background: url(images/corner_ie6.png) no-repeat -5px -36px;
}
.gwt-MenuBarPopup .menuPopupBottomLeft {
background: url(images/corner.png) no-repeat 0px -41px;
-background: url(images/corner_ie6.png) no-repeat 0px -41px;
}
.gwt-MenuBarPopup .menuPopupBottomRight {
background: url(images/corner.png) no-repeat -5px -41px;
-background: url(images/corner_ie6.png) no-repeat -5px -41px;
}
* html .gwt-MenuBarPopup .menuPopupTopLeftInner {
width: 5px;
height: 5px;
overflow: hidden;
}
* html .gwt-MenuBarPopup .menuPopupTopRightInner {
width: 8px;
height: 5px;
overflow: hidden;
}
* html .gwt-MenuBarPopup .menuPopupBottomLeftInner {
width: 5px;
height: 8px;
overflow: hidden;
}
* html .gwt-MenuBarPopup .menuPopupBottomRightInner {
width: 8px;
height: 8px;
overflow: hidden;
}
.blog_image {
padding: 1px;
margin: 0px 20px 0px 20px;
border: 0px solid #021a40;
/* width:300px; */
/* height:auto; */
}
.staff-image {
padding: 1px;
margin: 0px 20px 0px 0px;
border: 0px solid #021a40;
width: auto;
height: 200px;
}
.staff-information {
width: 1260px;
height: 230px;
/* border: 20px solid #021a40; */ /* margin: 0px 0px 25px 0px; */
border-radius: 9px 9px 9px 9px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-top: 2px solid #000000;
border-left: 2px dashed #000000;
border-right: 2px dashed #000000;
}
.staff-information-west {
/* background-color: #000000; */
font-weight: bold;
margin-left: auto;
margin-right: auto;
width: 315px;
}
.staff-information-east {
margin-left: auto;
margin-right: auto;
width: 315px;
horizontal-align: left;
}
.featured-item-1 {
border-left: 3px solid #003366;
border-top: 3px solid #003366;
}
.featured-item-2 {
border-left: 3px solid #003366;
border-right: 3px solid #003366;
border-top: 3px solid #003366;
}
.featured-item-3 {
border-right: 3px solid #003366;
border-top: 3px solid #003366;
}
.featured-title {
width: 406px;
text-transform: uppercase;
padding-left: 10px;
}
.featured_image {
/* padding-left: 10px; */ /* margin: 0px 0px 0px 10px; */
width: 130px;
height: 130px;
-webkit-box-shadow: 10px 10px 20px 1px rgba(0, 51, 102, 1);
-moz-box-shadow: 10px 10px 20px 1px rgba(0, 51, 102, 1);
box-shadow: 10px 10px 20px 1px rgba(0, 51, 102, 1);
}
.featured-body {
width: 216px;
height: auto;
font-size: 15px;
padding-left: 15px;
}
.myButton {
-moz-box-shadow: inset 0px 1px 0px 0px #7a8eb9;
-webkit-box-shadow: inset 0px 1px 0px 0px #7a8eb9;
box-shadow: inset 0px 1px 0px 0px #7a8eb9;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #637aad
), color-stop(1, #5972a7));
background: -moz-linear-gradient(top, #637aad 5%, #5972a7 100%);
background: -webkit-linear-gradient(top, #637aad 5%, #5972a7 100%);
background: -o-linear-gradient(top, #637aad 5%, #5972a7 100%);
background: -ms-linear-gradient(top, #637aad 5%, #5972a7 100%);
background: linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#637aad',
endColorstr='#5972a7', GradientType=0);
background-color: #637aad;
border: 1px solid #314179;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 28px;
font-weight: bold;
padding: 32px 76px;
text-decoration: none;
}
.myButton:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5972a7
), color-stop(1, #637aad));
background: -moz-linear-gradient(top, #5972a7 5%, #637aad 100%);
background: -webkit-linear-gradient(top, #5972a7 5%, #637aad 100%);
background: -o-linear-gradient(top, #5972a7 5%, #637aad 100%);
background: -ms-linear-gradient(top, #5972a7 5%, #637aad 100%);
background: linear-gradient(to bottom, #5972a7 5%, #637aad 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5972a7',
endColorstr='#637aad', GradientType=0);
background-color: #5972a7;
}
.myButton:active {
position: relative;
top: 1px;
}
.html-clicked {
background: url("Resources/Images/Widgets/things.png") repeat scroll 0 0
transparent;
height: 68px;
list-style: none outside none;
margin: 0;
line-height: 63px;
padding-left: 25px;
color: #fff;
font-family: georgia;
font-weight: bold;
font-size: 13px;
cursor: pointer;
}
.html-unclicked {
background: url("Resources/Images/Widgets/things.png") repeat scroll 0
-66px transparent;
height: 68px;
list-style: none outside none;
margin: 0;
line-height: 63px;
padding-left: 25px;
color: #23438a;
font-family: georgia;
font-weight: bold;
font-size: 13px;
cursor: pointer;
}
This is the last major issue holding me back from pushing this to production (besides making new images). I've been chasing my tail on this one for 3 days now, and am finally giving up.

Answer 1

Ok, I got it working, but it caused another issue that I had to fix. The entire problem above had to do with my CSS for .my-DockPanel
Before:
.my-DockPanel {
height: 100%;
width: 100%;
border-spacing: 0px;
font-color: white;
}
After:
.my-DockPanel {
height: auto;
width: 100%;
border-spacing: 0px;
font-color: white;
}
This created a new issue with certain pages sliding to the left, but all I had to do was set their width to be static. Problem solved!