[jQuery] Odd .hover effect in IE7

[Brian W]

Using hover effect works fine in Firefox however it produces an odd
effect in IE7. On hover the background-image gives the appearance of
shifting up 1px and to the left 1px, also the text font changes. The
background-image has rounded corners, the hover effect changes the
corners to appear straight. Very strange. The lite version of the page
code is below.

--- [ external js file (using jquery v1.3.2) ] ---
$(document).ready(function() {
    $("ul#menu_primary > li a").hover(
        function() {
            $(this).animate({ opacity: 0.75 }, "fast");
            $(this).animate({ opacity: 1.0 }, "fast");

            // OR

            //$(this).fadeTo("fast", 0.75);
            //$(this).fadeTo("fast", 1.0);
        }
    );
});

--- [ css ] ---
#pagenav {background:#FFF url(/include/graphic/theme/1/
bkgrd_pagenav_hp.png) no-repeat left top !important;}
#pagenav #menu_primary {height:41px;list-style-type:none;margin-bottom:
0;}
#pagenav #menu_primary li {float:left;margin:0;}
#pagenav #menu_primary li a {color:#FFF;display:block;text-
align:center;text-decoration:none;width:156px;}
#pagenav #menu_primary li a:visited {color:#FFF;}
#pagenav #menu_primary li a:hover {color:#66B7EC;}
#pagenav #menu_primary li a#itemA {background:url(/include/graphic/
theme/1/menu_itemA.png) no-repeat left top !important;}
#pagenav #menu_primary li a:hover#itemA {background:url(/include/
graphic/theme/1/menu_itemA.png) no-repeat left bottom !important;}

--- [ html ] ---
<div class="grid_16" id="pagenav">
<ul class="grid_16 alpha" id="menu_primary">
<li><a href="/" id="itemA">Item A</a></li>
<li><a href="/" id="itemB">Item B</a></li>
<li><a href="/" id="itemC">Item C</a></li>
<li><a href="/" id="itemD">Item D</a></li>
<li><a href="/" id="itemE">Item E</a></li>
<li><a href="/" id="itemF">Item F</a></li>
</ul>
<div class="clear"></div>
</div>

I appreciate all suggestions.

-brian-