Top Of Page Slightly Cutoff When Using Hashtag/Anchor Links (FF Only)

This is part 2 of this question: Hash(#) Link Causes Content To Jump - Why?. The root issue is actually something that's only occurring in FireFox (my apologies for not bringing th

Solution 1:

Edit: Took a look at your fiddle again and this time I updated it with a few changes. http://jsfiddle.net/GKCE6/12/

I took the off all of the set widths that you had, which will make it more fluid/responsive to the screen size. Also your nav was collapsing because of the floated elements inside of it, so I added a clear class and cleared the floats in your nav.

html {
    margin: 0;
    padding: 0;
    background: none repeat scroll 0 0 #FFFFFF;
    height: 100%;
    width: 100%;
}
body {
    min-height: 100%;
}
#container {
    margin: 0 auto;
    overflow: hidden;
    position: static;
    width: 100%;
    height: auto;
}
nav {
    border-bottom: 1px solid #E6E6E6;
    margin: 0 auto;
    padding: 1em 0 0.2em;
    display: block;
}
nav h2 {
    float: left;
    display: inline;
}
nav a {
    float: right;
    display: inline;
}
#content:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
#content {
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 auto;
    padding: 0;

}

.clear {
   clear:both;
}