Need some CSS help with aligning DIVs

On my blog there is a header image, header_whole.gif, that caps the top of the page used for posts (see screenshot below). In Firefox the page divs and graphic align nicely, making it look like a whole page, but in IE there is more black around the top corners making it look a bit funky.
http://northernpassages.com/blog/index.php
screenshot: http://www.northernpassages.com/blog/wp-content/uploads/corner.jpg
As you can see the black is wider around the header_whole image than it is for the rest of the page.
My CSS looks like this:
#rap {
margin: 10px auto;
width: 680px;
background: #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
font-family: palatino, georgia, times new roman, times, serif;
font-size: .85em;
text-align: left; /* IE hack Part 2 */
border-top: 5px solid #000;
border-bottom: 5px solid #000;
}
#topcontent {
width: 670px;
background: #000 url(‘images/header_whole.gif’) no-repeat top;
margin: 9px auto 0px auto;
height: 27px;
}
#bottomcontent {
width: 670px;
background: #000 url(‘images/bottom_whole.gif’) no-repeat top;
margin: 0px auto 9px auto;
height: 27px;
}
#content {
width: 670px;
background: #eedfb6 url(‘images/pagebg.jpg’);
margin: 0 auto;
}
And the header_whole.gif is 670px wide.
I noticed that it displayed fine in IE if I changed the #topcontent to 673px wide, but then it looked wider in the #post in Firefox. Any ideas?