oliver: IE und CSS, nicht zu glauben!

Hallo zusammen

Ich hab echt grössere Probleme meine mit CSS erstellte Seite auch für den IE zu optimieren. Zwar hab ich n Problem mit der Liste.
Meine Navigation lege ich in Liste an und formatiere diese im CSS. Wenn ich nun jedoch nach jedem abschliesenden Listeneintrag eine Linie hin mache, dann fällt mir diese bei eine verschachtelung plötzlich weg! Bei Firefox und Safari geht das problem los.

Hier der Code:

<div id="Navigation">
<ul class="firstlevel">
  <li><a href="postfach.xhtml">:: Mein Postfach</a></li>

<ul class="seclevel">
  <li><a href="#">&Uuml;bersicht</a></li>
  <li><a href="posteingang.xhtml">Posteingang</a></li>
  <li><span class="aktive">Entw&uuml;rfe</span>

<ul class="thirlevel">
   <li><a href="familie.xhtml">Familie</a></li>
   <li><a href="geschaft.xhtml">Gesch&auml;ftsentwurf</a></li>
   <li class="last"><a href="#">Support</a></li>
  </ul>
</li>
  <li><a href="#">Gesendet</a></li>
  <li><a href="#">Papierkorb</a></li>
  <li><a href="#">Spam</a></li>
  <li><a href="#">Pers&ouml;nliche Ordner</a></li>
  <li><a href="#">Ordner&uuml;bersicht</a></li>
  </ul>

<li><a href="#">:: Adressbuch</a></li>
  <li><a href="#">:: Kalendar</a></li>
  <li><a href="#">:: MedienCenter</a></li>
  <li><a href="#">:: Internet-Telefon</a></li>
  <li><a href="einstellungen.xhtml">:: Einstellungen</a></li>
</ul>

</div>

Laut Buch sollten die Verschachtelungen stimmen ...
Danke für Hilfe
Gruss
O

  1. Wenn du die Elemente richtig öffnest und schließt sollte es klappen:

      
    <div id="Navigation">  
     <ul class="firstlevel">  
      <li><a href="postfach.xhtml">:: Mein Postfach</a>  
       <ul class="seclevel">  
        <li><a href="#">&Uuml;bersicht</a></li>  
        <li><a href="posteingang.xhtml">Posteingang</a></li>  
        <li><span class="aktive">Entw&uuml;rfe</span>  
         <ul class="thirlevel">  
          <li><a href="familie.xhtml">Familie</a></li>  
          <li><a href="geschaft.xhtml">Gesch&auml;ftsentwurf</a></li>  
          <li class="last"><a href="#">Support</a></li>  
         </ul>  
        </li>  
        <li><a href="#">Gesendet</a></li>  
        <li><a href="#">Papierkorb</a></li>  
        <li><a href="#">Spam</a></li>  
        <li><a href="#">Pers&ouml;nliche Ordner</a></li>  
        <li><a href="#">Ordner&uuml;bersicht</a></li>  
       </ul>  
      </li>  
      <li><a href="#">:: Adressbuch</a></li>  
      <li><a href="#">:: Kalendar</a></li>  
      <li><a href="#">:: MedienCenter</a></li>  
      <li><a href="#">:: Internet-Telefon</a></li>  
      <li><a href="einstellungen.xhtml">:: Einstellungen</a></li>  
     </ul>  
    </div>  
    
    

    (Ohne Buch)

    1. Ja, das hab ich eben gemacht, doch leider sind dann die CSS Einstellungen nicht mehr korrekt, d.h. ich muss bei dem geöffnetem eine neue Class geben, damit die Linie am Schluss nicht doppelt kommt ...
      Anscheinend ist der IE echt peniebel und akzeptiert keine Schreib- und Formatierungsfehler, denn bei Firefox geht es ja eben.

      1. hi,

        Ja, das hab ich eben gemacht, doch leider sind dann die CSS Einstellungen nicht mehr korrekt,

        du meinst, sie ergeben dann nicht mehr das, was du dir wünschst.

        Anscheinend ist der IE echt peniebel und akzeptiert keine Schreib- und Formatierungsfehler, denn bei Firefox geht es ja eben.

        idR. ist es eher andersherum.

        die falsche verscachtelung von listen ist allerdings ein gravierender fehler - solche solltest du unbedingt vermeiden.
        dabei helfen dir bspw. die hier schon genannten validatoren.

        wenn dann dein CSS "nicht mehr korrekt" ist - dann ist es von vornherein "falsch" gewesen (d.h. nicht geeignet das zu erreichen, was du erreichen wolltest).

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. Hallo,

    Laut Buch sollten die Verschachtelungen stimmen ...

    Bist du sicher? Der W3C-Validator meckert bei <ul class="seclevel">.

    Viele Grüße
    Frank

  3. Moinsen,

    <div id="Navigation">
    <ul class="firstlevel">
      <li><a href="postfach.xhtml">:: Mein Postfach</a></li>

    entweder fehlt hier ein schliessendes </ul> oder die Verschachtelung ist falsch. Listen dürfen NUR <li>...</li> beinhalten, eine neue <ul>/<ol> muss also _in_ ein <li> geschrieben werden.

    <ul class="seclevel">
      <li><a href="#">&Uuml;bersicht</a></li>
      <li><a href="posteingang.xhtml">Posteingang</a></li>
      <li><span class="aktive">Entw&uuml;rfe</span>

    so wie hier.

    <ul class="thirlevel">
       <li><a href="familie.xhtml">Familie</a></li>
       <li><a href="geschaft.xhtml">Gesch&auml;ftsentwurf</a></li>
       <li class="last"><a href="#">Support</a></li>
      </ul>
    </li>

    Hier steht der schleissende </li> zum öffnenden in der Zeile mit "Entwürfe". Allerdings würde ich die auch so mit Tabs versehen, dass aus dem Code sichtbar wird in welcher Unterebene die Verschachtelung ist.

    Laut Buch sollten die Verschachtelungen stimmen ...

    sicher?

    --
    cu,
    Maz
  4. Hallo,

    Wenn Du den Validator http://validator.w3.org/ für Deinen Quelltext verwendest, merkst Du sehr schnell, dass ein Fehler im Quelltext ist. Den Rest haben die anderen ja schon gesagt.

    Jan