I have a complete tableless web layout that I designed in PS CS4 and exported the slices. I created a CSS file and then switched all the tables to DIVs and created classes in the CSS file for each of them. For some reason when it is loaded into IE8 there seems to be an extra 4-6 px space around the divs. But when loaded into firefox it looks perfect. I have never run into this issue before so I am not sure what the problem is.
Here is the HTML:
<html>
<head>
<title>598760 - Index2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stylesheets/public.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header_logo"><img src="images/header_logo.jpg" /></div>
<div id="header_right"><img src="images/header_right.jpg" /></div>
<div id="menubar"><img src="images/menubar.jpg" /></div>
<div id="sep1"><img src="images/sep1.jpg" /></div>
<div id="sep2"><img src="images/sep2.jpg" /></div>
<div id="mid_wrapper">
<div id="nav_wrapper">
<div id="menu_nav_header"><img src="images/menu_nav_header.jpg" /></div>
<div id="menu_nav_body">
<img id="img_nav" src="images/menu_nav_body.jpg" usemap="#img_nav" />
<map id="img_nav">
<area shape="rect" coords="30,10,196,35" href="home" alt="Home" title="Home" />
<area shape="rect" coords="30,39,196,64" href="Login" alt="Login or Register" title="Login or Register" />
<area shape="rect" coords="30,68,196,93" href="About" alt="About Us" title="About Us" />
<area shape="rect" coords="30,101,196,126" href="Terms of Use" alt="Terms of Use" title="Terms of Use" />
<area shape="rect" coords="30,130,196,155" href="Privacy Policy" alt="Privacy Policy" title="Privacy Policy" />
</map>
</div>
</div>
<div id="upper_body"><img src="images/upper_body.jpg" /></div>
</div>
<div id="sep3"><img src="images/sep3.jpg" /></div>
<div id="main_body">
<!-- ########## START MAIN CONTENT HERE ########## -->
<br />
<br />
<br />
<br />
<br />
<!-- ########## END MAIN CONTENT HERE ########## -->
</div>
<div id="footer"><img src="images/footer.jpg" /></div>
</div>
</body>
</html>Here is the CSS code:
#wrapper {
margin:auto;
width:940px;
padding:0px;
}
#header_logo {
width:719px;
height:100px;
vertical-align:top;
float:left;
}
#header_right {
width:221px;
height:100px;
vertical-align:top;
float:right;
}
#menubar {
width:940px;
height:40px;
vertical-align:top;
clear:both;
}
#sep1 {
width:220px;
height:10px;
vertical-align:top;
float:left;
}
#sep2 {
width:720px;
height:10px;
vertical-align:top;
float:right;
}
#mid_wrapper {
width:940px;
height:205px;
vertical-align:top;
}
#nav_wrapper {
width:220px;
height:205px;
vertical-align:top;
float:left;
}
#menu_nav_header {
width:220px;
height:40px;
vertical-align:top;
float:left;
}
#menu_nav_body {
width:720px;
height:205px;
vertical-align:top;
float:left;
}
#upper_body {
width:720px;
height:205px;
vertical-align:top;
float:right;
}
#sep3 {
width:940px;
height:10px;
vertical-align:top;
clear:both;
}
#main_body {
width:936px;
border:2px solid #9c9c9c;
background-color:#f6f6f6;
}
#footer {
width:940px;
height:50px;
}
body {
background-color:#FFF;
margin:auto;
padding:0px;
}
img {
border:none;
margin:0;
padding:0;
}
a {
color:#FF0000;
}Here is a link to the page live on the web on my server:
I appreciate any help at all. Thanks in advance.
-Jason
