IE problem - Unwanted margin around images

http://www.wedevents.com.au/index.asp

No problem in FF but in IE there are some unwanted white margins appearing around the images in the top and bottom menu.

Any ideas on how to remove the unwanted margin?

HTML:

<ul class="topnav">
<li>
    <a href="http://www.wedevents.com.au/index.asp"> 
    <img src="/images/menu_home.gif" name="home" onMouseOver="over(0)" onMouseOut="out(0)" alt="Home" /></a>
</li>
<li>
    <a href="http://www.wedevents.com.au/about.asp"> 
    <img src="/images/menu_abo开发者_开发问答ut.gif" name="about" onMouseOver="over(1)" onMouseOut="out(1)" alt="About" /></a>
</li>

CSS:

ul.topnav {
list-style: none;
padding: 0 85px;
margin: 0 auto;
width: 630px;
height: 36px;
background: #b09a27;
font-size: medium;
text-align: left;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0;
position: relative;
}
ul.topnav li a{
padding: 0;
color: #fff;
display: block;
text-decoration: none;
float: left;
}

There is no margin or padding on the image. The user agent style is defaulting to putting a border around the image. Set border: 0; on the image. Also see the other answer for reset.css to prevent this sort of thing in the future.

Try using a reset.css Here's one I like http://meyerweb.com/eric/tools/css/reset/