background image shifted slightly right in IE

Dan_55

02-17-2009, 10:44 PM

For some reason the background image on my site http://northwoodsaerialimaging.awardspace.com/ seems to be shifted just a few pixels to the right of the content when displayed with IE. In Firefox everything lines up perfectly :confused: BTW the main content of the page is just there as a placeholder for now...
Here is my CSS:
body {
background:#ffffff url(images/body_background.jpg) center repeat-y;
margin-top:0;
padding-top:0;
}

h2 {
font-family:verdana, arial, sans-serif;
font-size:14pt;
letter-spacing:.1em;
font-weight:lighter;
}

#container{
width:800px;
margin:0 auto;
}

#header {
height:178px;
width:800px;
background:url(images/header.jpg);
text-indent:-9999px;
float:left;
}

#content {
padding-top:10px;
padding-bottom:35px;
width:800px;
float:left;
}

#content p, h2 {
margin-left:20px;
}

a.nav, a.nav:link, a.nav:visited {
display:block;
width:200px;
height:25px;
background:#808080 url(images/menu.jpg);
text-align:center;
text-decoration:none;
font-family:verdana, arial, sans-serif;
line-height:23px;
font-weight:770;
letter-spacing:.12em;
font-size:11pt;
color:#000000;
overflow:hidden;
float:left;
}

#footer p{
width:100%;
padding-top:15px;
text-align:center;
border-top-width:thin;
border-bottom:0;
border-left:0;
border-right:0;
border-style:solid;
float:left;
}

a.nav:hover {
color:#000000;
background:#c0c0c0 url(images/menu_over.jpg);
}

a.nav:active {
color:#fff;
background:#c00;

I can't seem to get it to display properly in IE no matter what I do, does anyone see anything wrong with my code? I know its not that big of a deal, but the white area to the right really kills the faded background effect in IE:mad:
Thanks
Dan

Excavator

02-17-2009, 11:48 PM

Hello Dan 55,
For starters, you've got a body tag in the wrong place. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
<title>Northwoods Aerial Imaging</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>

<body>

<div id="container">

<div id="header">
<h1>Northwoods Aerial Imaging</h1>

</div>

<body> 

<a class="nav" href="home.html">Home</a>
<a class="nav" href="portfolio.html">Portfolio</a>
<a class="nav" href="about.html">About</a>
<a class="nav" href="contact.html">Contact</a>

<div id="content">
<h2>"Affordable low altitude aerial photography"</h2>

<p>Northwoods Aerial Imaging specializes in low altitude aerial photography. We use a specialized
radio control aircraft to bring you unique aerial perspectives at a low cost. </p>

</div>

<div id="footer">

<p>Copyright © 2009 Northwoods Aerial Imaging</p>

</div>

</div>

</body>

See the links about validating in my sig below.

Dan_55

02-18-2009, 01:07 AM

wow I can't believe I missed that, thanks for pointing that out. I checked the css and html with the validator in your sig and I got everything to pass but I still have the same problem :confused:
Thanks for your help

Excavator

02-18-2009, 02:07 AM

Your also floating your header and content. Normally you would float an element so you could put something beside it. Because #header and #content are full width, there is no need to float them.

Try making your CSS look like this:
body {
background:#fff url(images/body_background.jpg) center repeat-y;
margin-top:0;
padding-top:0;
}
* {
margin:0;
padding:0;
}
h2 {
font-family:verdana, arial, sans-serif;
font-size:14pt;
letter-spacing:.1em;
font-weight:lighter;
}
#container{
width:800px;
margin:0 auto;
}
#header {
height:178px;
width:800px;
background:url(images/header.jpg);
text-indent:-9999px;
}
#content {
margin: 50px 0 0 0;
padding-top:10px;
padding-bottom:35px;
width:800px;
}
#content p, h2 {
margin-left:20px;
}
a.nav, a.nav:link, a.nav:visited {
display:block;
width:200px;
height:25px;
background:#808080 url(images/menu.jpg);
text-align:center;
text-decoration:none;
font-family:verdana, arial, sans-serif;
line-height:23px;
font-weight:770;
letter-spacing:.12em;
font-size:11pt;
color:#000000;
overflow:hidden;
float:left;
}
#footer p{
width:100%;
padding-top:15px;
text-align:center;
border-top-width:thin;
border-bottom:0;
border-left:0;
border-right:0;
border-style:solid;
float:left;
}
a.nav:hover {
color:#000000;
background:#c0c0c0 url(images/menu_over.jpg);
}
a.nav:active {
color:#fff;
background:#c00;
}