Hover verschiebt div

[Sabine]

Hallo zusammen!

Folgendes Problem ist im IE aufgetaucht: sobald ich über das Menü "hovere", verschiebt sich ein div-Bereich, ich nenne ihn Info-Box. Diese Info-Box ist eingebettet in einem anderen div (Inhalt). Nun frage ich mich natürlich, warum das so ist.
Bitte wundert euch nicht über das bunte Layout, zu Testzwecken färbe ich alles immer ein. Oberhalb liegt eine Grafik und die restlichen div-Bereiche darunter müssen sich an diese Breite halten.
Anzusehen hier

Der CSS-Code sieht wie folgt aus:

  
* {margin: 0; padding: 0;}  
  
body {  
 color: #003459;  
 background-color: #f2eede;  
 font-size: 0.9em;  
 font-family: Verdana,Helvetica,Arial,sans-serif;  
 min-width: 41em; }  
  
.header {margin: 0; padding: 0; } /*Grafik*/  
  
#wrapper {  
 width: 1000px;  
 margin: 0 auto;  
 border: 1px solid black;  
}  
  
#Navigation {  
 font-size: 1.1em;  
 border-bottom: 5px solid #FFFFFF;  
 float: left;  
 background-color: #FFFF00;  
 list-style-type: none;  
 position: relative;  
 top: -27px;  
 left: 2.8em;  
 width: 11em;  
 height: 30em;  
 border-left: 5px solid #FFFFFF;  
}  
#Navigation li {  
 list-style: none;  
 margin: 0;  
 padding: 0.1em;  
 border-bottom: 3px solid #e6cc80;  
}  
#Navigation a {  
 color: #FFFFFF;  
 display: block;  
 padding: 0.2em;  
 font-weight: bold;  
 text-decoration: none;  
}  
#Navigation a:hover, a.aktuell {  
 background-color: #014171;  
}  
#inhalt {  
 position: relative;  
 top: -3px;  
 background-color: #FF7F7F;  
 margin: 0 3.2em 0 15.5em;  
 padding-left: 1em;  
 padding-bottom: 1em;  
 border-left: 5px solid #FFFFFF;  
 border-bottom: 5px solid #FFFFFF;  
 border-right: 5px solid #FFFFFF;  
}  
  
#info {  
 background-color: #00FF00;  
 border-left: 5px solid #FFFFFF;  
 border-bottom: 5px solid #FFFFFF;  
 font-size: 0.7em;  
 float: right;  
 width: 18.8em;  
 margin-left: 1em;  
 margin-bottom: 1em;  
}  

Sieht jemand das Problem?? Ich teste vorher nur im Firefox und der zeigt alles so an, wie es sein soll.
lg
Sabine