CSS/Jquery Position fixe et marge de mystère dans Safari & IE

Question

J'utilise jQuery pour faire une sous-navigation déroulante fixe en haut de la page lorsque vous passez la souris sur la navigation fixe. Je le fais en changeant un élément qui était auparavant relativement positionné au 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 le css box-shadow, mais après avoir enlevé cette ligne de code, il s'est avéré que ce n'était pas le cas.

Un aperçu ou des suggestions très appréciées!

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; 
    } 

LA 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 */ 
    }