Question

http://tylerh.info, I have a fixed navigation bar. But whenever I use the attribute “position:fixed;” it leaves a small amount of space below it, causing my title to not border up with it. However, this doesn’t happen with the attribute taken out.

Thanks!

CSS:

.qmmc .qmdivider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
position:relative;
z-index:1;
}

.qmmc .qmdividery{
float:left;
width:0px;
}

.qmmc .qmtitle{
display:block;
cursor:default;
white-space:nowrap;
position:relative;
z-index:1;
}

.qmclear {
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none !important;
}

.qmmc {
position:relative;
z-index:10;}

.qmmc a, .qmmc li {
float:left;
display:block;
white-space:nowrap;
position:relative;
z-index:1;
}

.qmmc div a, .qmmc ul a, .qmmc ul li {
float:none;
}

.qmsh div a {
float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}




    #qm0    
    {   
                background-image: linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        background-image: -o-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        background-image: -moz-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        background-image: -webkit-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        background-image: -ms-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
        padding-bottom: 4.5px;
        position:fixed;
        border-color:#A2BFE9;
        margin-top: -4.7em;
        position:fixed;
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #00A3EF;
    }


    #qm0 a  
    {   
        text-align: center;
        padding-top: 18px;
        padding-bottom: 18px;
        padding-left: 18px;
        padding-right: 18px;
        color:#FFFFFF;
        font-family:Karla;
        font-size:100%;
        text-decoration:none;

    }


    #qm0 a:hover    
    {   
           background-image: -moz-linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   background-image: -ms-linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   background-image: -o-linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   background-image: -webkit-linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   background-image: linear-gradient(bottom, #5465FF 0%, #00A3EF 100%);
   border-bottom-color:#000000;
   border-bottom-style:solid;
    }


    body #qm0 .qmactive, body #qm0 .qmactive:hover  
    {   
        background-color:#808080;
        text-decoration:underline;
        font-size: 80%;
    }



    #qm0 div, #qm0 ul   
    {   padding-top:4px;
        padding-bottom:4px;
        margin:0px 0px 0px -1px;
        background-color:#808080;
        border-width:4px 1px 1px;
        border-style:solid;
        border-color:#285DA8;
    }



    #qm0 div a, #qm0 ul a   
    {   
        padding:2px 40px 2px 5px;
        border-width:0px;
        border-style:none;
    }



        #qm0 div a:hover, #qm0 ul a:hover   
        <ul id="qm0" class="qmmc">

div#header {
    width: 100%;
    margin-bottom: 20px;
    padding-top: 1px;
    /*gradients */
    background-image: -ms-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -moz-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -o-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #006AD4), color-stop(1, #2500A1));
    background-image: -webkit-radial-gradient(center, circle farthest-corner, #006AD4 0%, #2500A1 100%);
    background-image: radial-gradient(circle farthest-corner at center, #006AD4 0%, #2500A1 100%);
    /*end gradients*/
    border-bottom: solid 2px #808080;
    padding-top:60px;
}

Html:

<li><a class="qmparent" href="/">Home</a></li>
<li><a class="qmparent" href="/?page_id=7">Ask a Question</a></li>

<li><a class="qmparent" href="javascript:void(0)">Menu3</a>

    <ul>
    <li><a href="javascript:void(0)">Placeholder1</a> </li>

    <li><a href="javascript:void(0)">Placeholder1</a></li>

    <li><a href="javascript:void(0)">Placeholder2</a></li>
    <li><a href="javascript:void(0)">Placeholder3</a></li>
    <li><a href="javascript:void(0)">Placeholder4</a></li>
    <li><a href="javascript:void(0)">Placeholder5</a></li>
    <li><a href="javascript:void(0)">Placeholder6</a></li>
    </ul></li>


<li><a class="qmparent" href="javascript:void(0)">Categories</a>

    <ul>
    <?php wp_list_categories('title_li=&orderby=name&use_desc_for_title=1&hierarchical=1') ?>

    </ul></li>{ 
        text-decoration:underline;
    }

Answer 1

There are a few things wrong with the css and html on your site.

1. There as an empty <h6> at the top of your html. I don’t see a use
   for this. Also it is the reason why your header gets pushed down. Try removing it.
2. Your fixed menu has a margin-top. This is not possible on fixed
   positionned elements. Remove this. Also set top: 0 here to force the menu in place. (Also a padding of 4.5px is not allowed. There is no such thing as halve a pixel on your screen)
3. give the header a padding-top of 50px, the same as the height of
   your menu. This makes it fit directly under the manu.

That should solve your problem. Worked for me in Chrome code inspector anyway.

Perhaps you could try to validate your css and html on the W3C site, as there might be more issues with it.