issue with fixed center footer using 960gs in IE and firefox

Question

I am having issue trying to align my fixed footer in IE and FF. Chrome seems to render the page fine! Here is what I get in Chrome:

The footer appears in the correct position. Here is what I get in IE and FF. The alignment of the footer goes bad:

Here is my HTML code:

<div id="page-wrap" class="container_12">
    <header id="header" class="grid_12">
        <!-- header content and main navigation -->
    </header>

    <div id="content" class="grid_12">
        <!-- slider and content goes here! -->
    </div>

    <footer id="footer" class="grid_12">
        <div class="menu">
            <ul>
                <li><a href="http://localhost/asq/1/">Menu1</a></li>
                <li><a href="http://localhost/asq/2/">Menu2</a></li>
                <li><a href="http://localhost/asq/3/">Menu3</a></li>
                <li><a href="http://localhost/asq">Home</a></li>
                <li><a href="http://localhost/asq/5/">Menu5</a></li>
                <li><a href="http://localhost/asq/6/">Menu6</a></li>
                <li><a href="http://localhost/asq/7/">Menu7</a></li>
            </ul>
        </div>
    </footer>

</div>

And my CSS for the footer is:

#footer {
    bottom: 0;
    position: fixed;    
}

What am I missing?

Answer 1

to center the footer

#footer{
width:800px;
margin-left:auto;
margin-right:auto;
}

Answer 2

Write like this:

#footer {
    bottom: 0;
    left:0;
    right:0;
    position: fixed;    
}

.menu{
    width:800px;
    margin:0 auto;
}

Answer 3

Have you tried :

Margin: 0px auto; 

This is a very reliable technique for centering content.