Logo does not center in Firefox but centers in Chrome - html

Question

This is my site in question: LINK
As you can see, my Logo is pushed over to the right side in Firefox but it should be centered. Works great in Chrome for example.
I've tried looking for a Firefox only stylesheet, but I couldn't really find the right CSS setting that makes this work correctly.
Here's the relevant HTML code that's wrapped in a id named container that I have so far:
<div id="nav">
<ul id="index_cards">
<li id="card-1">
<h3><strong>Home</strong></h3>
</li>
<li id="card-2">
<h3><strong>About/Contact</strong></h3>
</li>
<li id="card-4">
<h3><strong>Portfolio</strong></h3>
</li>
<li id="card-5">
<h3><strong>Services</strong></h3>
</li>
</ul>
</div>
<div id="header">
<div id="logo">
<img src="imgs/logo.png" name="ielogo" width="457" height="223" id="ielogo" />
</div>
</div>
CSS:
#container {
top:-73px;
margin-top:-70px;
min-height:100%;
position:relative;
display:block;
}
#header {
margin-top:-30px;
height:250px;
background-image:url(../imgs/header-top.png);
background-repeat:repeat-x;
padding:10px;
}
#logo {
margin:0 auto;
width:457px;
height:223px;
}

Answer 1

Problem lies with image put this in css
#logo img { display: block; }
http://jsbin.com/afuquq/3/

Answer 2

Revised answer: The solution is to incorporate the logo into the navigation section and have #header placed with position:absolute; on webpage.
HTML Fragment:
<div id="header"></div>
<div id="container">
<div id="nav">
<ul id="index_cards">
<li id="card-1">
<h3><strong>Home</strong></h3>
</li>
<li id="card-2">
<h3><strong>About/Contact</strong></h3>
</li>
<li id="card-4">
<h3><strong>Portfolio</strong></h3>
</li>
<li id="card-5">
<h3><strong>Services</strong></h3>
</li>
</ul>
<div id="logo"></div>
</div>
<!-- continued-->
</div>
CSS:
/* This section is modified */
#header {
background-image:url(http://tubebackgrounds.co.uk/portfolio/imgs/header-top.png);
background-repeat:repeat-x;
position: absolute;
width: 100%;
height: 250px;
margin-top: 40px;
}
/* This section is modified. */
#logo {
background-image:url(http://tubebackgrounds.co.uk/portfolio/imgs/logo.png);
background-repeat:no-repeat;
margin:0 auto;
width:457px;
height:250px;
}
There is also extra addition of margin-top: -20px; applied to CSS Selector #body to compensate for separate #font-face issue when those fonts are not loaded. Still, font integration will need to be addressed correctly.
Note: The jsFiddle below will not render #font-face fonts due to security settings.
Reference: jsFiddle
Access the above jsFiddle without /show/ in Address Bar to view the Edit Page.