CodingForums.com - Gap on right hand side of divs in IE

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:

Code:

* { 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.