Background stretch problem in IE7

programming web dev
1

I’m playing with a layout for a client (www.chirho.co.uk/k666new) but I’m getting annoying issues with IE7. All I’ve done so far is a container div with a repeating png background and a header div with a background png.

It looks fine in Firefox and Safari. It also validates as XHTML Strict and CSS 2. But when I look at it in IE7 the background png of the container div is stretched, and the header div isn’t positioned properly.

Here’s my css

body {
margin: 0px;
padding: 0px;
background: #a0a0a0;
text-align: center;
}

#container {
margin: 0px auto;
width: 1000px;
height: 1000px;
background: transparent url(../img/background.png) top center repeat-y;
}

#header {
width: 100%;
height: 242px;
background: transparent url(../img/header.png) top center no-repeat;
}

#header img {
width: 100%;
height: 100%;
border: 0px;
}

and XHTML

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Kreepsville 666</title>

<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="keywords" content="kreepsville, 666, zombie, rockabilly, horror, scary, gothic, dead, murder" />
<meta name="description" content="Go to your graveyard. Find a zombie. Ask him where he got his cool and kitsch clothing. From Kreepsville 666!" />
<meta name="author" content="ChiRho" />

<link rel="stylesheet" type="text/css" href="inc/main.css" media="screen" />

<script src="inc/FancyZoom.js" type="text/javascript"></script>
<script src="inc/FancyZoomHTML.js" type="text/javascript"></script>
<script src="inc/supersleight-min.js" type="text/javascript"></script>
<script src="inc/supersleight.js" type="text/javascript"></script>

</head>

<body>

<div id="container">

<div id="header">
<a href="#"><img src="img/x.gif" alt="Kreepsville 666" /></a>
</div>

</div>

</body>

</html>

Any thoughts?