Safari (only tested 2.0.3) fires :hover outside the borders of an overflowe:d element if it's containing floating element. The :hover will trigger outside the element on Safari. Neither MSIE6 or Firefox has this bug.
If you don't have Safari, you can watch a movie of the bug here.
I found a workaround if the floating element(s) are followed by an inline element and then a block element (in that order), the bug wont trigger, as seen in example (B). This isn't a really nice fix but works'
/* CSS */
#test,#workaround {
overflow: auto;
background-color: silver;
margin: 25px;
padding: 25px;
width: 250px;
height: 250px;
}
#test:hover, #workaround:hover {background-color: gray;}
#test div, #workaround div {
background: yellow;
float: left;
margin: 7px;
width: 900px;
height: 900px;
}
#test div:hover, #workaround div:hover {background: orange;}
.safarifix {position: relative; left: -100px;} /* Hide it */
<!-- HTML -->
<div id="test">
<div> </div>
</div>
<div id="workaround">
<div> </div>
<span class="safarifix">.</span>
<p class="safarifix"></p>
</div>
--
Martin at burnfield dot com, http://burnfield.com/martin