CSS / Jquery position fixe et marge mystère dans Safari et IE

Question

J'utilise jQuery pour faire une chute fixe vers le bas sous-navigation en haut de la page lorsque vous passez la souris sur la navigation fixe.

je faire cela en changeant un élément qui a été précédemment relativement positionné pour positionnement fixe. Cependant, cela produit une marge 10px indésirable dans IE7 et Safari.

Au début, je pensais que c'était la marge produite par la boîte ombre css, mais après la suppression de cette ligne de code, il est avéré que cela n'a pas été le cas.

Toute idée ou suggestion très apprécié!

Le CSS:

#headerContainer {
    width: 940px;
    position: relative;
    left: -10px !important;
    z-index: 900;
    border: 1px solid red;
    }

#header {
    position: relative;
    width: 940px;
    background: #fff;
    padding: 74px 0 20px 20px;
    z-index: 1000;
    box-shadow: 0px 0px 13px #c3c1bd;
    -moz-box-shadow: 0px 0px 13px #c3c1bd; /* Firefox */
    -webkit-box-shadow: 0px 0px 13px #c3c1bd; /* Safari, Chrome */
    }

#nav {
    width: 100%;
    height: 49px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    }

#nav ul {
    height: 49px;
    width: 920px;
    display: block;
    }

#nav ul li {
    height: 32px;
    list-style: none;
    display: block;
    float: left;
    background: #000;
    border-left: 1px solid #fff;
    padding: 7px 14px 0 14px;
    font-family: "Fette";
    letter-spacing: 1px;
    text-transform: uppercase;
    }

#nav ul li a {
    display: block;
    color: #ccc;
    width: 100%;
    height: 100%;
    }

#nav ul li a:hover {text-decoration: none}

.showNav {
    display: block !important;
    position: relative !important;
    top: 0px !important;
    padding-bottom: 20px !important;
    }

JQUERY:

$(window).scroll(function() {
    var scrolledpx = parseInt($(window).scrollTop());  
    if (scrolledpx < 375) {
        $('#nav ul, #header').unbind('mouseenter mouseleave');
        $('#header').addClass('showNav');
    } else {
        $('#header').removeClass('showNav');
        $('#nav ul').hover(function () {
                $('#header').slideDown('fast').css({
                    'position' : 'fixed',
                    'top' : '0px'
                });
        }, function () {
        });

        $('#header').hover(function () {

        }, function () {
            $('#header').slideUp('fast');
        });
    }
});

HTML:

<div id="wrapper">      

    <div id="nav">
        <ul class="center">
            <li id="logo">
                <a href="index.html">
                    <img src="assets/images/logo.png" alt="" />
                </a>
            </li>

            <li>
                <a href="#">About</a>
            </li>

            <li>
                <a href="#">Contributors</a>
            </li>

            <li>
                <a href="#">Contact</a>
            </li>

        </ul> <!-- nav -->
    </div>

    <div id="headerContainer" class="center">
        <div id="header">   

            <h3 id="scrapHeader">Thoughts About:</h3>   

            <input id="headerSearch" type="text" value="search" />
            <input id="headerSearchBtn" type="submit" value="" />

            <div class="clear"></div>

            <div id="categoryContainer">
                <ul>
                    <li>
                        <a href="#">Design</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Building</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Brands</a>
                        <strong>143</strong>
                    </li>
                    <li>
                        <a href="#">Technology</a>
                        <strong>143</strong>
                    </li>

                </ul>

                <span id="categoryMore">More</span>
                <div class="clear"></div>
            </div> <!-- categoryContainer -->
            <div class="clear"></div>
        </div> <!-- header -->
        <div class="clear"></div>
    </div>

Answer 1

#headerContainer {
    width: 960px;
    position: relative;
    z-index: 900;
    border: 1px solid red;
    }

#header {
    position: relative;
    width: 940px;
    background: #fff;
    padding: 74px 0 20px 20px;
    z-index: 1000;
    box-shadow: 0px 0px 13px #c3c1bd;
    -moz-box-shadow: 0px 0px 13px #c3c1bd; /* Firefox */
    -webkit-box-shadow: 0px 0px 13px #c3c1bd; /* Safari, Chrome */
    }