I have a fieldset inside of a fieldset. Each type of fieldset changes color when hovered over. Works great in Firefox, but in IE8 and IE8 in IE7 compat mode, when I hover over the child fieldset, it jumps (it looks like some padding gets removed, but that's not what my css says).
Can someone help me figure out how to prevent the jumpy effect in IE? Why does the child fieldset jump when hovered over, but not the parent fieldset?
<!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>
<style type="text/css">
fieldset.property { background-color: #EDF5FF; }
fieldset.property:hover { background-color: #C1DDFF; }
fieldset.service:hover { background-color:#EDF5FF; }
</style>
</head>
<body>
<fieldset class="property">
Parent fieldset<br />
Parent fieldset<br />
Parent fieldset<br />
<fieldset class="service">
Child<br />
Child<br />
Child<br />
</fieldset>
Parent fieldset<br />
Parent fieldset<br />
Parent fieldset<br />
</fieldset>
</body>