unternavigation problem IE6 & IE7

[Sansire]

Hi

Im Internet Explorer 7, und im Forefox wird die Unternavigation richtig angezeigt. Aber im Internet Explorer 6 hat es einen grösseren Abstand wenn die Zweiten <ul> einträge kommen.

Im CSS habe ich alle Tags mit * auf 0 Gleichgestellt.

Weiss jemand wie man diesen Abstand aufheben kann?

Navigation HTML aufbau:

<ul>
<!-- InstanceBeginEditable name="navig" -->
 <li><a href="index.html" title="Startseite">Startseite</a></li>
 <li><a href="metabolicbalance.html" title="Metabolic Balance">Metabolic Balance</a></li>
    <li>
            <ul>
    <li><a href="4phasen.html" title="4 Phasen">• 4 Phasen</a></li>
    <li><a href="bmi.php" title="Body Mass Index">• BMI</a></li>
                <li><a href="angebote.html" title="Zu den Angeboten">• Angebote</a></li>
   </ul>
        </li>
    <li><a href="powerplate.html" title="Power Plate">Power Plate</a></li>
 <li><a href="ueber.html" title="Über Mich">Über mich</a></li>
 <li><a href="praxis.html" title="Praxis">Praxis</a></li>
    <li><a href="kontakt.php" title="Kontakt">Kontakt</a></li>
    <li><a href="download.html" title="Download">Download</a></li>
    <li><a href="links.html" title="Links">Links</a></li>
    <li><a href="gb/gb.php" title="Gästebuch">Gästebuch</a></li>
    <!-- InstanceEndEditable -->
</ul>

CSS

* { margin:0; /* Mit "*" werden alle HTML Elemente angesprochen. Alle Werte für alle Tags werden auf 0 gesetzt. */ 
  padding:0; /*(Für Browser gleichformatierung)*/
 }
 
#navig  /* Navigations Spalte */
   { float:left;       
    padding-left:12px;
    padding-bottom:200px;
    padding-top:130px;
    width:140px;
    font-size:15px;
   }
#navig a  /* Navigation Links */
    { text-decoration:none;       
     color:#27519d;
     display:block;
    }
#navig a:hover /* Navigation Links Über-Effekt */
    { font-weight:bold;
     background-color:#f8f8fa;    
    }
#navig ul /* Navigation Links Auflistung */
   {
 list-style:none;
   }
#navig ul ul /* Navigation Links Auflistung unter 'Metabolic Balance' */
    {
 color: #fff;
 padding-left:20px;
 font-size:12px;
    }
#navig li  /* Listeneinträge Abstand nach unten in der Navigation */
    {
 margin-bottom:0px;
 padding-bottom: 10px;
    }

Momentan sieht es so aus:

IE 6

IE 7

 

[threadi]

Gib jedem <li> oder ggfs. auch <a> noch "height: 1%;" und frag bitte nicht wieso der IE6 sowas braucht :]

 

[Sansire]

Gib jedem <li> oder ggfs. auch <a> noch "height: 1%;" und frag bitte nicht wieso der IE6 sowas braucht :]

danke, hat geklappt :-)

 

[Sansire]

Gib jedem <li> oder ggfs. auch <a> noch "height: 1%;" und frag bitte nicht wieso der IE6 sowas braucht :]

Bei einigen Browsern war das Problem immernoch nicht behoben.

Lösung:

Anstatt

<ul>
<li><a href="#">Metabolic Balance</a></li>
<ul>
<li><a href="#">4 Phasen</a></li>
<li><a href="#">BMI</a></li>
<li><a href="#">Angebote</a></li>
</ul>
<li><a href="#">Über mich</a></li>
</ul>

Muss das so aussehen

<ul>
<li><a href="#">Metabolic Balance</a>
<ul>
<li><a href="#">4 Phasen</a></li>
<li><a href="#">BMI</a></li>
<li><a href="#">Angebote</a></li>
</ul>
</li>
<li><a href="#">Über mich</a></li>
</ul>

Dann klappts auch in jedem Browser, ohne diesen Hack für IE6.

 

[Efchen]

Das sowieso, ein <ul> kann nicht innerhalb eines <ul> vorkommen, nur innerhalb eines <li>. Anders machts auch keinen Sinn.

 

[Sansire]

Das sowieso, ein <ul> kann nicht innerhalb eines <ul> vorkommen, nur innerhalb eines <li>. Anders machts auch keinen Sinn.

Habe ich ja grad dargestellt

 

[Efchen]

Aber nicht begründet.
Ich hab das ergänzt.