0

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:
http://wickidgrafx.com/demos/other/ifinever/

I appreciate any help at all. Thanks in advance.

-Jason

4
Contributors
4
Replies
5
Views
8 Years
Discussion Span
Last Post by knausO
0

Hi, I had a look at your page, W3C says you need a DOCTYPE declaration to identify the language being used. eg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Also it looks as if there are 2 div id #img_nav on your page. To have more than one ID of the same name on a page, Class id should be used.
Your code:
<div id="menu_nav_body">
<img id="img_nav" src="images/menu_nav_body.jpg" usemap="#img_nav" />

Perhaps change to:
<img src="images/menu_nav_body.jpg" usemap="#img_nav" />

You've used #img_nav in your html, but it is not referenced in your CSS code.
Admittedly I'm relatively new at this so I hope that I haven't gone charging in the wrong direction. Hope it all works out.

jaminit

0

The doctype fixed it.

Also it looks as if there are 2 div id #img_nav on your page. To have more than one ID of the same name on a page, Class id should be used.

This has to stay that way or else the image map does not work anymore. It don't make sense to me. But it has to stay that way.

Thanks for the reply ot was very helpful.

0

Regarding your muliple IDs, change the following:

<img id="img_nav" src="images/menu_nav_body.jpg" usemap="#img_nav_map" />
      <map id="img_nav_map">
        <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>

That should sort it out. Now regarding the additional padding. Lets try reset all default broswer styling.

*
{
margin: 0;
padding: 0;
}

Try it out let me know if it worked

0

If it only doesn't work in ie8 and works well in ie7 I usually just put this lien of code in the head:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

so it emulates ie7 engine

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.