Проблемы с шириной у Firefox и Chrome, как мне это исправить?

Question

У меня проблема с хромом и firefox с шириной на странице моего нижнего колонтитула. При посещении веб-сайта с Firefox, Safari и IE нижний колонтитул в порядке.

Firefox preview

http://imageshack.us/photo/my-images/830/firefoxw.png/

Chrome preview

http://imageshack.us/photo/my-images/543/chromefooter.png/

Я думаю, что что-то в Chrome перекрывает ширину нижнего колонтитула, и поэтому оно больше.

Я собрал JS Fiddle, чтобы продемонстрировать эту проблему:

http://jsfiddle.net/7XCRt/

Вот код CSS для нижнего колонтитула:

#footer {
    overflow: hidden;
    border-top: 1px solid #DBDBDB;
    color: #BBBBBB;
    background: none repeat scroll 0 0 #F0F0F0;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    width:945px;
}

Структура сайта:

<!-- BEGINN MAINWRAPPER -->
<div id="mainWrapper">
    <!-- BEGIN WRAPPER -->
    <div id="wrapper">
        <!-- BEGIN HEADER -->
        <div id="header">
            <div id="logo"></div>
        </div>
        <!-- END HEADER -->

        <!-- BEGIN CONTENT -->
        <div id="content">
                <div id="middle">
           .......
                </div>
               <!-- END MIDDLE -->
           <!-- BEGIN FOOTER -->
           <div id="footer">
               </div>
           <!-- END FOOTER -->
               </div>
           <!-- END CONTENT -->
       </div>
       <!-- END WRAPPER -->
   </div>
   <!-- END MAINWRAPPER -->

Код CSS для остальных:

#wrapper {
    margin:0 auto;
    width:945px;
}
#middle {
    background: none repeat scroll 0 0 #F0F0F0;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    height: 100%;
    left: 0;
    overflow: hidden;
    top: 0;
    width: 945px;
    z-index: -2;
}

#content {
    overflow:hidden;
    margin-top:90px;
}