IE macht bei CSS Probleme

[RaZ0oR]

Hi,
ich bin grad dabei mir ein kleines Design zu machen. Da ich dafür ja nur CSS benutze, müsste es bestimmt eine möglichkeit geben, wei man mein Problem beseitigen kann. Ich denke wenn man die Bilder vergleicht, kann man schnell Feststellen, was mein Problem ist.

So sieht es in Opera & Firefox aus

und so sieht es im Problemfall IE aus

Und das ist meine CSS Datei

@charset "utf-8";

body {
  background-color: #e1ddd5;
  font-size: 13px;
  font-family: Calibri, Arial, SunSans-Regular, Sans-Serif;
  color:#564b47;  
  padding:0px 20px;
}

html { 
  padding:0px;
  margin:0px auto;
}

#inhalt {
  border:1px solid #564b47; 
   background-color:#fff;
   width: 700px;
   margin: auto;
   padding-left: 5px;
  
}

#inhalt #navi {
border-left:2px dotted #000; 
border-bottom:2px dotted #000;
float:right;
width:200px;
background-color:#ff99cc;
margin:0px 0px 20px 20px;
padding-left:10px;
}

#header {
	margin:auto;
	width:700px;
	height:80px;
}

Hoffe ihr könnt mir Helfen.

mfg RaZ0oR

Edit:
Ich weiß nihct ob das relevand ist, aber da wo Startseite drin Steht, ist

<h1> Startseite </h1>

und die CSS sieht so aus

@charset "utf-8";

a:link { font-weight:bold; text-decoration:none; color:#000000;}
a:visited {font-weight:bold; color:#000000;}
a:hover { font-weight:bold; text-decoration:underline; color:#333333;}
a:active { font-weight:bold; text-decoration:underline; color:#333333;}

h1 { background-color:#ff99cc;  border:2px dotted #000; font-size:28px;}
h2 { font-size:20px; }

Edit2:
Also cih hab die Lösung
ich hab folgende Zeile abgeändert

h1 { background-color:#ff99cc;  border:2px dotted #000; font-size:28px; margin-top:20px;}

Und dann gings auch schon