Browser Konflikt mit IE 6 und Opera

[Paul]

Hey Leuz
Habe gerade ein neues Layout erstellt. Es soll ein Layer basierendes Layout sein und auf moeglichst vielen Browsern laufen.
Mein Browser ist Firefox 2.0.0.2 auf einem Mac System. Mein Problem ist, dass die seite eine kleine Macke beim IE 6 und Opera hat. Undzwar ist das DIV Layer von der Navi zu gross (1 oder 2 Pixel) und somit entsteht ein grauer Balken der durch den Adler geht.
Ein Beispiel findet hier: www.phpaul.de/new/test2.html
Danke fuer eure Hilfe.
Verbesserungen sind auch gerne gesehn.

Den HTML Code koennt ihr auf der Seite finden.

Hier findet ihr die CSS Inhalte:

body {
 font-family:Helvetica, Arial, sans-serif;
 margin:0;
 background-color: #d5d5d5;
}

#root {
 border: #000000;
 border-width:1px;
 width:920px;
 height:auto;
 background-color:#FFFFFF;
 margin-left:auto;
 margin-right:auto;
 margin-top:15px;
}

#banner {
        height: 117px;
 background-color:#0000CC;
 background-image:url(../images/banner2.gif);
 background-position:right;
 margin:0;
}

#nav {
 width:920px;
 height: 30px;
 background-color:#CCCCCC;
 background-image:url(../images/nav_back.gif);
 background-repeat:repeat-x;
 margin:0;
}

#nav p {
 margin:0;
 padding:0;
}

#nav ul {
 word-spacing:35px;
 margin:0;
 margin-left:40px;
 padding-top:0;
 list-style-type:none
}

#nav li {
 padding:0;
 margin-left:15px;
 display:inline
}

#nav a {
 text-decoration:none;
 color:#000000;
 font-weight:bold;
 font-size:16px;
}

#nav a:hover {
 text-decoration:none;
 color:#999999;
 font-weight:bold;
 font-size:16px;
}

#main {

float: left;
 width:670px;
 height:100%;
 background-color:#FFFFFF;
}

#menu {
 float:right;
 width: 250px;
 height:100%;
 background-color:#FFFFFF;
 z-index:2;
 background-image:url(../images/menu_back.gif);
}

#menuinside {
 padding-left:25px;
 padding-right: 20px;
}