side effects ofbefore margin-height trick for fixed headers

by Sheryl Hohman

HTML

<!--<section>
<div id="top">
</div>
</section> -->
<section>
    <h3>1 - .anchor class AND ID in **div** that wraps the link's text</h3>
    <div id="one" class="a-wrapper"><a href="#two">NO highlight when hover on the BLANK (non-text) portion of the line</a></div>
</section>

<section id="two" class="anchor">
    <h3>2 - .anchor class And ID in **section** wrapping the div, that wraps the link's text</h3>
    <div class="a-wrapper"><a href="#three">Does highlight when hover on the BLANK (non-text) portion of the line</a></div>
</section>

<section id="three">
    <h3>3 - No .anchor class; ID in **section** wrapping the div, that wraps the link's text</h3>
    <div class="a-wrapper"><a href="#one">Google</a></div>
</section>

CSS

/* if uncomment this css rule, then the highlighting changes
*/
section {
    height: 200px;
}
/* if comment out the above rule, highlighting. and perhaps other stuff, changes */

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

/*
anchor {
    margin-top: -80px;
    padding-top: 80px;
}
*/

div.a-wrapper {
    display: block;
}

.a-wrapper:hover {
    background-color: yellow;
}