24 Jan 10 IE6 CSS Hover Margin Fix in UL
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.
<style>
ul li a {
display: block;
width: 155px;
margin-bottom: 3px;
}
ul li a:hover {
color: #FFFFFF;
background-color: #FC7C00;
}
</style>
<body>
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a> </li>
</ul>
</body>
The only fix I could find is simply to add a space before the closing a tag like so:
<ul>
<li><a href="#">test </a></li>
<li><a href="#">test </a> </li>
</ul>
If you know of a better way to fix it, or if you know why it does this, please let me know!
Learn more about your human rights at HumanRights.com
Leave a Comment
