I'm using several anchors on a page using the negative margin approach to account for my fixed header (50px). When each section had a specified height, the anchors worked great. When I changed them to work dynamically based on content, they anchor about 5px above where they should, leaving a small sliver of space that's causing issues with my side nav bullets (color changes based on the anchor you're at). Currently, jQuery is generating the code for the anchoring, but I've hard-coded href's to the links without any change. Any thoughts? Here's a snippet of the HTML:
<div id="main-anchor" class="anchor"></div>
<section class="main page-section">
<div class="section-heading">
Anchor class:
.anchor {
content: "";
display: block;
height: 50px;
margin-top: -50px;
padding: 0;
position: relative;
top: 0;
}
*Edit: Solution - I had two instances of the div height in jQuery, the latter of which was 51 rather than 50 pixels which was creating the gap above my anchor.
