Markus: Divblöcke und der Internet Explorer 7

In Firefox und Opera funktioniert es so wie es soll die Divblöcke liegen direkt übereinander, aber beim IE eben nicht...
Es ist immer ein kleiner Abstand dazwischen.
Hier mal der Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>header</title>
<style type="text/css">@import url(design.css);</style>
</head>
<body>
<center>
<div id="design">
<div id="header">
<img src="images/header.jpg" width="916" height="249" alt="" />
</div>
<div id="topnavi">
Link Link Link Link Link Link Link Link Link Link Link Link
</div>
<div>
<img src="images/tri2.jpg" width="916" height="8" alt="" />
</div>
<div id="box">
Header<br /><br /><br />
</div>
<div id="navi">
Inhalt
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="trennlinie">
<img src="images/tri.jpg" width="735" height="8" alt="" />
</div>
<div id="content">
Inhalt<br /><br /><br />
</div>
</div>
</center>
</body>
</html>

body {
background-color: #8dc032;
background-image: url(images/bg.jpg);
background-position: top;
background-repeat: repeat-x;
margin-top: 0px;
}
#design {
width: 916px;
}
#topnavi {
width: 916px;
height: 25px;
background-image: url("images/topnavi.jpg");
}
#trennlinie {
float: left;
}
#box{
position: relative;
float: left;
top: 0px;
left: 0px;
width: 735px;
height: 106px;
background-image: url("images/box.jpg");
}
#content{
position: relative;
float: left;
top: 0px;
left: 0px;
width: 735px;
background-image: url("images/content.jpg");
}
#navi{
position: relative;
float: right;
top: 0px;
left: 0px;
width: 181px;
background-image: url("images/navi.jpg");
}