I've noticed that IE7's native hover (mouseover/out) detection changes if a negative margin is applied. With a negative margin, only the text in a div is 'hoverable'. With a non-negative margin, the entire div is 'hoverable'. At first, I thought my jQuery hover code was faulty, but the example below shows that the cssointer behavior changes with the margin setting. Can someone suggest a hack to make the hover detection consistent regardless of margin? (Note: remove #side-menu DIV.active {margin-left:-5px} to see the difference.) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>hover issue</title> <style type="text/css"> .hoverable { cursor: pointer; } #side-menu { float: left; width: 250px; font-size: 12pt; font-weight: bold; } #side-menu P { padding: 0px 5px 0px 5px; font-size: 10pt; font-weight: normal; } #side-menu DIV { border: silver 1px solid; padding: 5px; cursor: pointer; background: whitesmoke; color: dimgray; margin-left: 0px; } #side-menu DIV.active { cursor: default; background: white; color: black; border-right: none; margin-left: -5px; } #side-menu DIV.hover { color: black; border-right: none; margin-left: -5px; } </style> </head> <body> <div id="side-menu"> <div class="hoverable tab-item"> item 1 <p> item 1 text.</p> </div> <div class="active hoverable tab-item"> item 2 <p> item 2 text.</p> </div> <div class="hoverable tab-item"> item 3 <p> item 3 text.</p> </div> <div class="hoverable tab-item"> item 4 <p> item 4 text.</p> </div> </div> </body> </html>
adding min-height changed the layout of the enclosed P a bit, but explicitly styling the P cured it. ie7 and ff both now render the same and have the same hover behavior.