Gap on right hand side of divs in IE

[GreenRiver]

Hi there, I have been scratching my head for several days now with this problem. Basically, here's the website:
http://greenriver.110mb.com/

What I am trying to achieve is a black outer glow around the left and right of the content as the background, like this website:
http://www.theaustralian.news.com.au/

Now when viewed in Firefox it looks just like I want it. However, when viewed in IE there is a gap to the right, and I cannot figure out why. I assume it may be something to do with the positioning of IE, as the position of the footer and the nav bar are slightly left to how Firefox positions them. Or even maybe the centering of the page?

Here is the CSS:

* { margin: 0; padding: 0; border: 0}

html
{
	margin: 0;
	padding: 0;
	height : 100%;
	background-image:url('bg.gif');
	background-repeat:repeat-y;
	background-position: center;
	background-color:#a2a2a2;
}

body
{
	margin: 0 auto;
	padding: 0;
	height : 100%;
}

#headimg
{
	margin: 0 auto;
	display: block;
	float: none;

	height: 100px;
	width: 1000px;
	vertical-align: bottom;
	background-image:url('header.jpg');

}

#ie5hack
{
	width: 940.5px;
}

#navdiv
{
	margin: 0 auto;
	display: block;
	float: none;
	width: 1000px;

	font-size: 19.5px;
}

#body
{
	margin: 0 auto;
	display: block;
	float: none;

  	min-height:100%;
	height:auto !important;
  	height:100%;

	position: relative;
	width: 940px;
	padding: 20px 30px;
	font-style: normal;
	color: white;
	font-size: 16px;

	background-color: #323232;
}

#fontsize a:link, a:visited, a:hover, a:active
{
	color: white;
}

#fontcolouredit a:link, a:visited, a:hover, a:active
{
	color: white;
}

#footer
{
	margin: 0 auto;
	display: block;

        position: relative;
        margin-top: 0px;
	width: 1000px;

	padding: 7px 0px 0px;
	font-size: 14px;
	color: white;
	text-align: center;
	line-height: 2.5;

	background-color: #555454;
}

#footer a:visited, a:link
{
	color: black;
}

.navigation
{
	width: 100%;
	padding-top: 0px;
	color: black;
}

.navigation ul
{
	padding: 0;
	list-style-type: none;
	padding-bottom: 0;
	padding-top: 0;
	margin-bottom: 0;
	margin-top: 0;
	padding-right: 0px;
}

.navigation li
{
	margin: 0px;
	padding: 0;
	float: left;
}

.navigation
{
	padding: 0;
	background: #555454 none;
}

.navigation li
{
	display:block;
	width: 5.7em;
	margin-left: 0em;
	background: #555454 none;
	text-align: center;
}

.navigation a
{
	display: block;
	width: 100%;
	text-decoration: none;
	color: white;
}

.navigation a:hover
{
	background: #323232 none;
}

Any help would be very much appreciated!

Thanks for your time,

GreenRiver.

[jrp1]

Hey GreenRiver,

Try using this as your background image instead: Link

Let me know how it works for you.

[GreenRiver]

Hey jrp1, thanks for the image. it worked a treat! i appreciate it. But I was hoping to figure out why IE did it in the first place as to avoid it in the future. Non the less, thank you very much!

[jrp1]

Glad i could help