Website doesn't appear correctly in IE8

I'm working on a site that appears correctly in IE7 and Firefox, but looks funny in IE8.  Is there a hack available to correct this issue?  You can find the site at www.stoutsproauto.com.  Thank you.
Here is the website

<!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 type = "text/css" rel="stylesheet" href = "StoutsProAuto_Background.css" />
<link type = "text/css" rel="stylesheet" href = "StoutsProAuto_WhiteSpace.css" />

<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" />

<link rel="icon" type="image/x-icon" href="/favicon.ico"  />
<!--#include file="GoogleVerify.asp"-->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stout's Pro Auto, where you'll find all your vehicle maintenance needs!</title>

<meta name="description" content="" />
<meta name="keywords" content="" />


</head>

<body>
<div id="bordertop">
	<div id="topPhoto">
    	<a href="index.asp" title="Stout's Pro Auto Auto Service and Repair"><img src="Images/Stouts-Pro-Auto-MechanicsLeft.png" border="none" alt="Stout's Pro Auto serving the Lock Haven, Williamsport, and Jersey Shore areas with sounds auto repair" /></a><a href="index.asp" title="Stout's Pro Auto Auto Service and Repair"><img src="Images/Stouts-Pro-Auto-MechanicsRight.png" border="none" alt="Stout's Pro Auto serving the Lock Haven, Williamsport, and Jersey Shore areas with sounds auto repair" /></a>
    </div>
</div>
<div id="centerpage">
    <div id = "whitespace">
        	<!--#include file="Menu2.asp"-->
            <img src="Images/Stouts-Pro-Auto-Quality-Automotive-Service-and-Repairs.gif" alt="Stouts Pro Auto Quality Automotive Service and Repairs" />
            <div id="homeText">From small imports to large commercial vehicles, Stout's has the state of the art equipment and knowledge to perform any service.  Featuring the latest in high tech equipment, including computer diagnostic scanners for all models, we can find your vehicle's problem and fix it quickly.</div>
            <br />
            <br />
            <div align="center"><img src="Images/Stouts-Pro-Auto-HomePage1.png" alt="Stout's Pro Auto Quality Automotive Repair serving the Williamsport Lock Haven and Jesrey Shore Areas" /></div><Br />
            <img src="Images/Stouts-Pro-Auto-HomePage2.png" alt="Stout's Pro Auto Quality Automotive Repair serving the Williamsport Lock Haven and Jesrey Shore Areas" /><br />
            <br />
            <br />
            <img src="Images/Stouts-Pro-Auto-Auto-Care-Credentials-logos.gif" alt="Stout's Pro Auto's Auto Care Credentials for the Jersey Shore, Lock Haven, and Williamsport Areas" />
    </div>
    <!--#include file="StoutsProAuto-Site-Info.asp"-->
</div> 
	<!--#include file="GoogleAnalytics.asp"-->
</body>
</html>


Here is the CSS


@charset "utf-8";
/* CSS Document */

#centerpage {
	margin-left:auto;
	margin-right:auto;
	width:800px;
	}

#whitespace {
	width:800px;
	background-color:#FFFFFF;
	overflow:auto;
	height:100%;
	}
	
#bordertop {
	background-color:#6A2022;
	height:100px;
	padding-bottom:50px;
	}
	
#borderbottom {
	background:url(BottomImplantBorder.gif) no-repeat bottom;
	}
	
#bottomLinks {
	width:700px;
	text-align:center;
	padding-bottom:13px;
	margin-left:auto;
	margin-right:auto;
	}

#Menu {
	width: 800px;
}

#topPhoto {
	width:900px;
	margin-left:auto;
	margin-right:auto;
}

#Header1 {
	width: 360px;;
	float:left;
	padding-left:40px;
}

#Header2 {
	width: 420px;
	float:right;
	padding-top:10px;
	text-align:center;
}

#footer {
	width: 760px;
	height: 20px;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:10px;
}

#Divider {
	width: 780px;
	padding-left:20px;
}

#homeText {
	text-align:center;
	width:650px;
	margin-left:auto;
	margin-right:auto;
}

#columnA {
	text-align:left;
	float: right;
	width: 580px;
	padding-left:20px;
}
	
#columnB {
	text-align:left;
	float: left;
	width: 180px;
	padding-left:20px;
	padding-top:20px;
}

#columnC {
	text-align:left;
	float: right;
	width: 540px;
	padding-top:20px;
	padding-right:40px;
}

#RestCol1 {
	text-align:left;
	float: left;
	padding-left:10px;
	width: 280px;
	padding-bottom:10px;
	}

#RestCol2 {
	text-align:left;
	float: right;
	padding-left:10px;
	padding-right:20px;
	width: 260px;
	padding-bottom:10px;
	}
	
#RestCol3 {
	text-align:left;
	padding-left:10px;
	float: left;
	width: 560px;
	padding-bottom:10px;
	}
	
#RestCenterBtn {
	width:260;
	margin-right:auto;
	margin-left:auto;
	}

#ActText {
	width:560;
	text-align:justify;
	padding-left:10px;
	padding-right:10px;
	}

#Colleges {
	width:560px;
	padding-left:10px;
	padding-right:10px;
	margin-left:auto;
	margin-right:auto;
	}
	
#CollegeLink {
	text-align:center;
	width:540px;
	padding-left:10px;
	padding-right:10px;
	}
	
#columnPhotoGallery {
	text-align:left;
	float: right;
	width: 580px;
}


#columnBarRightContact {
	text-align:left;
	float: right;
	width: 400px;
	padding-left:0px;
}

#columnBarLeftContact {
	text-align:left;
	float: left;
	width: 180px;
	padding-left:0px;
}

#columnBarText {
	text-align:justify;
	height:188px;
}


a.linkText:link { 
color:#FFFFFF;
}

a.linkText:visited { 
color:#CCCCCC;
}
	
#Menu {
	padding-left:20px;
	}
	
#Para {
	text-indent:2em;
	text-align:justify;
	}

#DailySpecials {
	text-align:center;
	color:#FFFFFF;
	font-size:large;
	}
	
#DailySize {
	height:400px;
	}
	
#DailySpecialsDetail {
	text-align:justify;
	text-indent:10px;
	padding-left:5px;
	font-size:small;
	}
	
#SiteLinks {
	padding-left:75px;
	text-align:left;
	}

#siteMapLine {
	text-align:center;
	}

Open in new window

mbeatty20Asked:
Who is Participating?
 
ludofulopCommented:
sorry, it should be overflow: hidden;
0
 
ludofulopCommented:
change the overflow style of #whitespace:

#whitespace {
      width:800px;
      background-color:#FFFFFF;
      overflow:none;
      height:100%;
      }
0
 
fsouzabrasilCommented:
use

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
...
</head>
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
greenFoxCommented:
This should do the trick:

#whitespace {
      width:800px;
      background-color:#FFFFFF;
      /* overflow:auto; */
      height:100%;
      }

Alternatively, you can use <div id="whitespace" style="overflow: visible"> ... </div>
0
 
greenFoxCommented:
Oh, and this, too:

#whitespace {
      width:800px;
      background-color:#FFFFFF;
      overflow:visible;
      height:100%;
      }
0
 
mbeatty20Author Commented:
This worked for me, I didn't try the other solutions so it is possible that they may too have worked.  Thank you for the quick responses.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.