CSS wird im IE für Navigation falsch umgesetzt

[macmensa]

Hi @all...

ich hoffe hier auf etwas Hilfe für einen Laien in Sachen Programmierung... Vorab muss ich noch erwähnen, das ich meine Seiten mit NOF Fusion 10 erstellt habe... Ich weiss das da nun viele aufschreien, aber jeder muss doch erstmal anfangen... Und ein HTML Generator war das, was mir die ersten Schritte erleichtert hat... Ein HTML Editor ist sicher etwas anderes... Aber nichts desto trotz...

Ich habe nun meine Seiten neu online gestellt... Die Validierung zeigt mir zwar noch einige Fehler, die sollen aber laut dem NOF Forum keine Auswirkungen auf mein Problem haben... Also:

ISS Seite

Auf obiger Seite sieht man eine Seite auf der mein Problem besonders zuschlägt... Firefox zeigt die Navigation auf der linken Seite wie gewünscht... Der IE dagegen überhaupt nicht... Nun kann ich nur spekulieren, ob Firefox etwas falsch macht und es dadurch "richtig" anzeigt, oder aber der IE etwas zerschiesst... Folgender Code liegt all dem zugrunde...:

  
#navi {  
position: absolute;  
width: 165px;  
top: 150px;  
}  
  
#navi li {position: relative;}  
  
#navi ul {  
display: block;  
width: 120px;  
list-style: none;  
padding: 0;  
}  
  
#navi a, #navi span {  
display: block;  
height: 16px;  
padding: 15px 0px 20px 5px;  
text-decoration: none;  
color: #999999;  
font: bold 12px arial, helvetica, sans-serif;  
background-repeat: no-repeat;  
background-position: top right;  
}  
  
#navi a:active, #navi a:focus {outline: none;}  
  
#navi ul ul span, #navi ul ul a {  
display: block;  
width:140px;  
height: 14px;  
padding: 15px 0px 18px 5px;  
margin-left: 20px;  
border-bottom: 1px solid #777777;  
text-decoration: none;  
font: bold 11px arial, helvetica, sans-serif;  
color: #999999;  
background-repeat: no-repeat;  
background-position: top right;  
}  
  
#navi ul a:hover, #navi ul span:hover {color: #bdb177;}  
  
#navi ul ul ul a , #navi ul ul ul span {  
display: block;  
width: 70px;  
height: 15px;  
padding: 8px 0px 5px 10px;  
margin-left: 85px;  
border-bottom: 1px solid #777777;  
color: #bdb177;  
font: bold 11px arial, helvetica, sans-serif;  
text-align: right;}  
  
#navi ul ul ul a:hover, #navi ul ul ul span:hover {  
color: #777777;  
}  
  
#navi ul ul ul,  
#navi ul ul,  
#navi ul li:hover ul ul,  
#navi ul li.issliste ul ul  
{display: none;}  
  
#navi ul li:hover ul,  
#navi ul ul li:hover ul,  
#navi ul li.issliste ul  
{display: block;}  

Und der HTML Code für die Listen:

  
<div id="navi">  
  <ul>  
        <li><a id ="home" href="../index.html">Home</a></li>  
        <li></li>  
        <li><a id="raum" href="./raumfahrt.html">Raumfahrt</a>  
          <ul>  
             <li><a id="shuttle" href="./shuttle.html">Space Shuttle</a></li>  
             <li><a id="ground" href="./ground.html">Ground Control</a></li>  
             <li><a id="const" href="./2018.html">Constellation</a></li>  
             <li><a id="gloss" href="./glossar.html">Glossar</a></li>  
          </ul>  
         </li>  
  
        <li class="issliste"><span id="iss">ISS</span>  
           <ul>  
             <li><a id="chronik" href="./1998.html">Chronik</a></li>  
             <li><span id="module">Module</span>  
               <ul>  
                 <li><span>Columbus</span></li>  
                 <li><span>Kibo</span></li>  
                 <li><span>Destiny</span></li>  
                 <li><span>Harmony</span></li>  
               </ul>  
             </li>  
          </ul>  
       </li>  
  
   </ul>  
</div>  

Egal was ich nun mit meinen Laienhaften Wissen probiere, ich "verschlimmbessere" es dadurch nur noch... Meistens passt es dann im Firefox auch nicht mehr... Und da ich langsam den Wald vor lauter Bäumen nicht mehr sehe hoffe ich hier nun auf etwas Hilfestellung bei meinem Problem...

Gruss Mac