My HTML menu has a unique feature that highlights the currently active page using a specific class.
<div id="menu">
<ul>
<li class="activelink"><a href="index.html">Home</a></li>
<li><a href="early.html">Growing Up and School</a></li>
<li><a href="career.html">Films</a></li>
<li><a href="jamesbond.html">James Bond</a></li>
<li><a href="gallery.html">Pictures</a></li>
</ul>
</div>
While designing the menu, I noticed an issue where the background highlighting the active link was misaligned in Chrome and IE compared to Firefox. This discrepancy led me to investigate the styling of my menu.
To see the problem in action, visit http://jsfiddle.net/C9mZG/
After testing the code on jsfiddle, I realized that even in Firefox, the alignment issue persisted. It seems like my local file is displaying correctly, but there's definitely a styling flaw causing the vertical misalignment between the dark red current link background and the lighter red menu. I'm struggling to pinpoint the exact cause of this discrepancy.