Question

I’m using jQuery to make a fixed drop down sub-navigation at the top of the page when you mouse over the fixed nav.

I do this by changing an element that was previously relatively positioned to fixed positioning. However this produces an undesirable 10px margin in IE7 and Safari.

At first I thought it was the margin produced by the css box-shadow, but after removing that line of code it turned out that that wasn’t the case.

Any insight or suggestions much appreciated!

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

THE 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');
        });
    }
});

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