Wolfgang: unterschiedlich Darstellung Firefox<->IE7

Nabend zusammen,

ich versuche gerade meine erste Seite mit CSS-Navigation zu erstellen.

Leider sitze ich nun schon seit einigen Stunden vor dem Problem, dass der IE7 es anders anzeigt, als gewünscht. Der Firefox machts richtig.

Folgendes: Ich möchte, dass der navigations-Container genauso breit erscheint, wie die Liste. Weiß jemand, was ich tun muss?

Html:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<link rel="stylesheet" type="text/css" href="index-Dateien/layout2.css">  
<title>bla</title>  
</head>  
<body>  
  
<div id="titelzeile"><h2 class="titel">Seiten&uuml;berschrift</h2></div>  
<img src="index-Dateien/testbild.jpg" width="980" class="titelbild">  
<div id="navigation">  
<ul>  
<li class="aktiv"><a href="unterseite1.html">Unterseite1</a></li>  
<li><a href="unterseite2.html">Unterseite1</a></li>  
<li><a href="unterseite3.html">Unterseite1</a></li>  
</ul>  
</div>  
<div id="inhalt"><h3>Hallo und Willkommen !!!</h3>  
<br>  
blabla bla blabla blabla bla blablablabla  
</div></body></html>  

CSS-Datei:

  
body  
{  
width:980px;  
}  
  
  
#navigation  
{  
position:relative;  
float:left;  
display:block;  
margin-right:-190px;  
margin-left:30px;  
margin-top:30px;  
margin-bottom:30px;  
padding:0;  
height:2000px;  
width:158px;  
top:-46px;  
left:-30px;  
background:#B0C4DE;  
}  
  
* html #navigation  
{  
top:-49px;  
}  
  
#navigation ul  
{  
list-style:none;  
clear:left;  
  
}  
  
#navigation li  
{  
position:relative;  
left:-40px;  
border:solid blue 1px;  
padding:2px;  
background:darkblue;  
text-align:center;  
width:152px;  
}  
  
  
  
#navigation a  
{  
color:white;  
}