I found a weird thing today. IE6 will remove the top margin of a hover link when it’s in a list if it has hover attributes. It’s too hard to explain without the code, so here is the code to re-create the phenomenon. This will make a list that when you hover over the links they jump up as the top margin is removed.
<p><style><br />
ul li a {<br />
display: block;<br />
width: 155px;<br />
margin-bottom: 3px; <br />
}<br />
ul li a:hover {<br />
color: #FFFFFF;<br />
background-color: #FC7C00;<br />
} </p>
<p></style><br />
<body><br />
<ul><br />
<li><a href="#">test</a></li><br />
<li><a href="#">test</a> </li><br />
</ul><br />
</body></p>
The only fix I could find is simply to add a space before the closing a tag like so:
<ul><br />
<li><a href="#">test </a></li><br />
<li><a href="#">test </a> </li><br />
</ul>
If you know of a better way to fix it, or if you know why it does this, please let me know!