I have been searching but couldn't find an answer to my issue, so I apologize if this question has been asked before. I am working on a simple site layout and noticed that two of the div regions do not expand fully in Chrome, however, they do in Firefox and IE. These two divs contain tables - could this be causing the problem?
Here is a comparison image showing the gaps in the top and bottom footer div when viewed in Chrome:
Below is the CSS for the two regions:
.topbar{
margin: 0; <---Added this in hopes to fix it.
width:76%;
height: 34px;
background-image:url('img/topImgBg.png');
background-repeat:repeat-x;
padding-left: 12%;
padding-right: 12%;
color:white;
font-size:12px;
text-align:right;
}
.footer{
height:15%;
width:76%;
padding-left:12%;
padding-right:12%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A1A1A1', endColorstr='#ffffff');
background: -webkit-gradient(linear, left top, left bottom, from(#A1A1A1), to(#ffffff));
background: -moz-linear-gradient(top, #A1A1A1, #ffffff);
}
And here is the body CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
min-width:1024px;
font-family:Verdana;
font-size:14px;
}
Thank you in advance.