IE problem on navigation

Hi all,

I have a problem with hover in that in IE it creates a margin at the bottom of the link. How can i get rid of it without changing the layout in the other browsers.

The code:
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>Brynarth Country Guest House</title>
<style type=“text/css”>

body {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
background-color:#ABBCC8;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#wrapper {
width:1400px;
margin:0 auto;
}

#header {
height:230px;
background-color:#5e8197;
border-bottom:3px solid #eee;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#topnav {
background-color:#8aa2b3;

}

#topnav ul {
height:30px;
margin:0;
margin-left:250px;
padding:0;
list-style-type:none;
}

#topnav li{
float:left;
}

#topnav a {

display:block;
text-decoration:none;
color:#fff;
padding:5px 10px 5px 10px;

}

#topnav a:hover {
background-color:#000;
}

</style>
</head>
<body>

<!–wrapper–>
<div id=“wrapper”>

<!–header–>
<div id=“header”>

</div>
<!–end of header–>

<!–topnav–>
<div id=“topnav”>
<ul>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>Accommodation</a></li>
<li><a href=“#”>Eating</a></li>
<li><a href=“#”>Relaxing</a></li>
<li><a href=“#”>Exploring</a></li>
<li><a href=“#”>Availability & Booking</a></li>
<li><a href=“#”>Offers/News</a></li>
<li><a href=“#”>Map & Directions</a></li>
</ul>
</div>
<!–end of topnav–>

<!–main_content wrapper–>
<div id=“main_content”>

</div>
<!–end of main_content wrapper–>

<!–footer–>
<div id=“footer”>
</div>
<!–end of footer–>

</div>
<!–end of wrapper–>

</body>
</html>

Figured it out it was the #topnav div height that caused the problem. I didn’t need the #topnav div at all. :nono: