strange roll over bug....

[meltedtoons]

I have a image roll over for my nav bar but it works fine on Safari, Chrome, Firefox but not on IE...

CSS

/* NAV */
div#nav a {
width: 160px;
height: 35px;
float: left;
background-image: url(navicons.gif);
}
div#nav a span { display: none; }

/* NORMAL STATES */
div#nav a.home { background-position: 0 0; }
div#nav a.toons { background-position: -160px 0; }
div#nav a.about { background-position: -320px 0; }
div#nav a.downloads { background-position: -480px 0; }
div#nav a.faq { background-position: -640px 0; }
div#nav a.contact { background-position: -800px 0; }

/* HOVER STATES */
div#nav a.home:hover { background-position: 0 -35px; }
div#nav a.toons:hover { background-position: -160px -35px; }
div#nav a.about:hover { background-position: -320px -35px; }
div#nav a.downloads:hover { background-position: -480px -35px; }
div#nav a.faq:hover { background-position: -640px -35px; }
div#nav a.contact:hover { background-position: -800px -35px; }

html:

<div style="background: rgb(0, 0, 102) url(none) repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; text-align: right;" width="1000" id="nav">
<div style="text-align: left;"><img src="round_left.png" style="width: 20px; height: 35px; float: left;" alt="" />
<a href="http://meltedtoons.com/home.html" class="home"><span>Home</span></a><a href="http://meltedtoons.com/toons.html" class="toons"><span>Toons</span></a><a href="http://meltedtoons.com/about.html" class="about"><span>about</span></a><a href="http://meltedtoons.com/downloads.html" class="downloads"><span>downloads</span></a><a href="http://meltedtoons.com/faq.html" class="faq"><span>faq</span></a><a href="http://meltedtoons.com/contact.html" class="contact"><span>contact</span></a>

<img src="right_round.png" style="width: 20px; height: 35px; float: left;" alt="" />
</div>

[zachsformacs95]

[comment deleted]