hover links with div - fine in all but IE8

[Readie]

Just a note: I've "fixed" this issue by forcing IE7 compatability mode in IE8.

---

Right, I have some hover buttons on one of my sites which are done with a div background-image attribute, with the actual link being a transparent .gif image on top.

This looks fine in firefox, chrome, opera, safari, IE6 (though the actual hover effect fails for IE6) and IE7.

In IE8, however, it adds about 50px worth of what seems to be right margin (but setting margin-right: 0px; has no effect) - which naturally screws up the entire page.

Just wondering if anyone could take a peek at the code and offer a reason as to why this happens?

img.navigation {
height: 30px;
width: 189px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
}

div.nav_home {
height: 30px;
width: 189px;
background-image: url('/images/navigation/home.png');
padding: 0px;
border: 0px;
margin-left: 1px;
margin-right: 0px;
}

div.nav_home:hover {
height: 30px;
width: 189px;
background-image: url('/images/navigation/home_hover.png');
padding: 0px;
border: 0px;
margin-left: 1px;
margin-right: 0px;
}

<div class="nav_home"><a href="/"><img class="navigation" src="/images/navigation/nav_blank.gif" border="0" alt="Home" title="Home" /></a></div>

[drhowarddrfine]

:hover only works on <a> in IE6.