• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 474
  • Last Modified:

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

0
mbeatty20
Asked:
mbeatty20
1 Solution
 
ludofulopCommented:
change the overflow style of #whitespace:

#whitespace {
      width:800px;
      background-color:#FFFFFF;
      overflow:none;
      height:100%;
      }
0
 
ludofulopCommented:
sorry, it should be overflow: hidden;
0
 
fsouzabrasilCommented:
use

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
...
</head>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now