Markus: Divblöcke und der Internet Explorer 7

Beitrag lesen

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");
}