IE 7 Rendering Problem

I'm having a problem with a new layout I'm working on. Actually I have run into all kinds of problems, but I think I've worked around most of them and now have it working right in IE 7 and Firefox 2. The only remaining problem is a nasty gap below the layout that appears only in IE, and only when the content is long enough to cause scroll bars to appear. Any suggestions for how to clear up this gap would be appreciated.

Here is the code to the CSS file, FourRowFullHeight.css:
html, body
{
height: 100%;
}

*
{
font-family: Verdana, Arial, Helvetica, sans-serif;
}

body
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: #0066B3;
}

#PageContainer
{
_height: 100%;
min-height: 100%;
background-color: #BFE4FF;
width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
}

#PageHeader
{
height: 150px;
background-color: #00487D;
}

#MenuBar
{
height: 50px;
background-color: #80C9FF;
}

#MiddleArea
{
background-color: #6096BF;
display: block;
/* This forces IE 7 to extend MiddleArea to contain any children. Without it,
it doesn't work right. */
min-height: 1px;
}

#SideBar
{
display: none;
}

#ContentArea
{
_height: 290px;
min-height: 290px;
background-color: #406480;
padding: 5px 5px 5px 5px;
padding-bottom: 75px;
}

/* To enable a sidebar in this layout, uncomment these styles */
#SideBar
{
display: block;
float: left;
width: 200px;
background-color: #CFDCE6;
_height: 200px;
min-height: 200px;
}

#ContentArea
{
float: left;
width: 390px;
}

#ClearMiddle
{
clear: both;
height: 0px;
}

#Footer
{
position: absolute;
bottom: 0px;
height: 50px;
width: 600px;
background-color: #3082BF;
}

And hear is the code to the HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="Stylesheet" type="text/css" href="FourRowFullHeight.css" />
<title>Four Rows, 100% Height</title>
</head>
<body>
<div id="PageContainer">
<div id="PageHeader">Header</div>
<div id="MenuBar">Menu</div>
<div id="MiddleArea">
<div id="SideBar">
Sidebar
</div>
<div id="ContentArea">
<p>This layout will stretch to 100% of the browser window height. You can use repeating
background images to give the illusion that the content area actually spans the avialable
space.</p>
<p>This layout will stretch to 100% of the browser window height. You can use repeating
background images to give the illusion that the content area actually spans the avialable
space.</p>
<p>This layout will stretch to 100% of the browser window height. You can use repeating
background images to give the illusion that the content area actually spans the avialable
space.</p>
<p>This layout will stretch to 100% of the browser window height. You can use repeating
background images to give the illusion that the content area actually spans the avialable
space.</p>
<p>This layout will stretch to 100% of the browser window height. You can use repeating
background images to give the illusion that the content area actually spans the avialable
space.</p>
<p>This layout will stretch to 100% of the browser window height. You can use repeating
background images to give the illusion that the content area actually spans the avialable
space.</p>
<p>This layout will stretch to 100% of the browser window height. You can use repeating
background images to give the illusion that the content area actually spans the avialable
space.</p>
<p>This layout will stretch to 100% of the browser window height. You can use repeating
background images to give the illusion that the content area actually spans the avialable
space.</p>
<p>This layout will stretch to 100% of the browser window height. You can use repeating
background images to give the illusion that the content area actually spans the avialable
space.</p>
<p>This layout will stretch to 100% of the browser window height. You can use repeating
background images to give the illusion that the content area actually spans the avialable
space.</p>
</div>
<div id="ClearMiddle" />
</div>
<div id="Footer">Footer</div>
</div>
</body>
</html>

Again, the problem is the gap that appears below in Internet Explorer 7 when there is enough content to cause scrollbars to appear. If anyone has any suggestions at all, please share.

Answer this question

IE 7 Rendering Problem

mike6271
The gap left appears to be exactly the size needed for a horizontal scroll bar. Maybe IE is leaving space for a the scroll bar even though it doesn't need it If so, is there a clean way I can turn this off
IE 7 Rendering Problem

Answer this question