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;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
use
<head>
<meta http-equiv="X-UA-Compatibl
...
</head>
<head>
<meta http-equiv="X-UA-Compatibl
...
</head>
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>
#whitespace {
width:800px;
background-color:#FFFFFF;
/* overflow:auto; */
height:100%;
}
Alternatively, you can use <div id="whitespace" style="overflow: visible"> ... </div>
Oh, and this, too:
#whitespace {
width:800px;
background-color:#FFFFFF;
overflow:visible;
height:100%;
}
#whitespace {
width:800px;
background-color:#FFFFFF;
overflow:visible;
height:100%;
}
ASKER
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.
#whitespace {
width:800px;
background-color:#FFFFFF;
overflow:none;
height:100%;
}