Mnemon: IE6 zeigt Tabelle nicht an

Hallo zusammen,

ich bin was CSS angeht mittelmäßig begabt, und habe jetzt trotz Rücksprache bei Freunden und mehrstündiger Google-Suche und den entsprechenden Artikeln zum pekaboo-Hack etc. pp. das Handtuch werfen müssen:

Firefox zeigt die Tabelle an, der Explorer zeigt sie nicht an, obwohl sie "da" ist, sprich im Quelltext, und mir ist schleierhaft, wieso:

http://generalstab.org/doc/arc/kriegsarchiv.php

Link zum CSS für den IE is hier:

Link zum IExplorer-CSS

Das entscheidende ist wohl das Zusammenspiel der beiden Divs #Main und #Text, aber ich komme weder durch Nachlesen & Nachdenken noch durch Ausprobieren heraus, was ich da falsch mache (oder was der Exploder falsch macht)

Ausprobiert habe ich zoom: 1; ebenso wie display: relative; oder heigth= 1%; bei verschiedenen Divs. Ausprobiert habe ich, <table> per css zu formatieren oder einen <tablewrap>-Div einzufügen.

Es bleibt dabei: Text erscheint, die Tabelle wird nicht angezeigt.

Vielleicht kann einer der Cracks mir hier weiterhelfen, bevor ich mich noch 5 weitere Stunden frustriere.

mit den besten Grüßen,

Wolf

  1. Moin,

    Firefox zeigt die Tabelle an, der Explorer zeigt sie nicht an, obwohl sie "da" ist, sprich im Quelltext, und mir ist schleierhaft, wieso

    mir ist schleierhaft, was da bei dir passiert, ich kann deine Beschreibung nämlich nicht nachvollziehen. Meine IEs (Version 6 und 5.5) zeigen die Tabelle ganz brav an.

    Allerdings fallen mir in deinem HTML-Quelltext ein paar andere Kleinigkeiten auf.
    Zum Beispiel frage ich mich, warum du an einigen Stellen Umlaute normal ausschreibst, an anderen Stellen wieder Verrenkungen mit Entity-Referenzen machst ("... zu folgenden Feldz&uuml;gen").
    Zum Beispiel stelle ich fest, dass der Quellcode im Widerspruch zum DOCTYPE eben *kein* valides XHTML ist. Es gibt in XHTML keine Tags/Attributnamen in Großbuchstaben, und Attributwerte müssen in Anführungszeichen stehen. Abgesehen davon gibt es keine Attribute namens cellpadding oder cellspacing.

    Für meinen persönlichen Geschmack benutzt du zu viele div-Elemente, wo sie nicht nötig sind ("Divitis", der entsprechende Wiki-Artikel ist leider zur Löschung vorgeschlagen), z.B. #logo. Dieses div enthält nur ein einziges Kindelement und ist damit eigentlich überflüssig. Wenn es um die Formatierung mit CSS geht: Du kannst ebensogut das darin enthaltene a-Element direkt formatiieren.

    Das Markup in der Kopfzeile der Tabelle ist auch nicht optimal:

    ~~~html <tr>
        <td><b>Name des Spiels</b></td>
        <td><b>Name des Spielers</b></td>
        <td><b>Sprache</b></td>
        <td><b>Beendet</b></td>
      </tr>

      
    Anstatt der td mit eingesetztem <b> (das sowieso als deprecated, also missbilligt gilt) wären hier th-Elemente sinnvoller eingesetzt. Kontrolliere auch nochmal die korrekte Abfolge der öffnenden und schließenden Tags für die Tabellenzeilen und -zellen. Da ist einiges durcheinander geraten; an einer Stelle sehe ich drei aufeinanderfolgende </tr>.  
      
    Um zumindest solche formalen Fehler zu finden, empfehle ich dir immer wieder einen Besuch beim [Validator](http://validator.w3.org/), der dich auf diese Fehler aufmerksam macht und wahrscheinlich noch ein paar mehr findet, als mir jetzt auf die Schnelle aufgefallen sind.  
      
    
    > Link zum CSS für den IE is hier:  
    > [Link zum IExplorer-CSS](http://www.generalstab.org/css/fuckedup.css)  
      
    Nette Benamsung ... ;-)  
      
    Schönes Wochenende noch,  
     Martin  
    
    -- 
    Wenn der Computer wirklich alles kann,  
    dann kann er mich mal kreuzweise.
    
    1. Hallo zusammen!

      Vielen Dank für die Lösung, das hat mir wirklich einiges an Arbeit erspart!

      @ martin: Danke für die Hinweise. Zu meiner Rechtfertigung: Was Divs angeht, bin ich noch nicht 100% firm, deswegen baue ich erstmal ein "Gerüst" aus Divs, und anschließend fülle ich das mit inhalten. Sicher wäre es sinnvoll, in einem zweiten Schritt alle überflüssigen Divs wieder wegzunehmen.

      Was die Tabelle & das HTML angeht: Die Seite ist in ihren Grundlagen (sprich HTML-Struktur) noch von 1999, ich habe seit 2004 nicht geupdated und jetzt letzte woche per copy & Paste alles ins neue Design rübergehoben.

      Das da noch ne Menge poliert werden müßte, seh ich ein, ich möcht mich jetzt aber erstmal um neue Inhalte kümmern und darum, das er die gewählte Sprachpräferenz auch per Session beibehält :)

      Trotzdem Danke für die Hinweise, der Fred is in meinen bookmarks, und ich werde die Kritikpunkte sicher nochmal durchgehen.

      Grüße,

      Wolf

  2. Hallo,

    Firefox zeigt die Tabelle an, der Explorer zeigt sie nicht an, obwohl sie "da" ist, sprich im Quelltext, und mir ist schleierhaft, wieso:

    http://generalstab.org/doc/arc/kriegsarchiv.php

    Link zum CSS für den IE is hier:

    Link zum IExplorer-CSS

    Die fehlerbewirkende Stelle ist:

      
    #text * {  
     filter:alpha(opacity=100);  
     position:relative;  
     }  
    
    

    Mit #text * triffst Du auch die TR-Elemente der Tabelle. Der IE in den aktuell gepatchten Versionen 6.0 SP1 (also mit regelmäßigen Windows-Updates) hat Probleme mit Opacity-Filtern auf TR-Elementen.

    Rufe Deine Seite auf und führe dann

    javascript:void(document.getElementById('text').getElementsByTagName('TR')[0].style.filter = 'alpha(enabled=false)')

    als Scriptlet in der Adresszeite aus. Dann kannst Du mit

    javascript:void(document.getElementById('text').getElementsByTagName('TR')[1].style.filter = 'alpha(enabled=false)')
    javascript:void(document.getElementById('text').getElementsByTagName('TR')[2].style.filter = 'alpha(enabled=false)')
    ...

    Deine Tabelle Zeile für Zeile einblenden.

    Die CSS-Lösung wäre:

      
    #text * {  
     filter:alpha(opacity=100);  
     position:relative;  
     }  
    #text tr {  
     filter:alpha(enabled=false);  
     }  
    
    

    viele Grüße

    Axel

    1. Hallo,

      Der IE in den aktuell gepatchten Versionen 6.0 SP1 (also mit regelmäßigen Windows-Updates) hat Probleme mit Opacity-Filtern auf TR-Elementen.

      ...
      Um die Probleme zu erzeugen müssen die TR-Elemente zusätzlich eine von static abweichende Einstellung für position haben. Man kann also auch per

        
      tr { position:static; }  
      
      

      gegensteuern.

      Testcase:

        
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
              "http://www.w3.org/TR/html4/strict.dtd">  
      <html>  
      <head>  
      <title>TRs verschwinden bei filter:alpha und position:relative</title>  
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
      <style type="text/css">  
      * { position:relative; }  
      div * { filter:alpha(opacity=100); }  
      tr#z1, tr#z3 { position:static; }  
      </style>  
      </head>  
      <body>  
      <h1>Überschrift</h1>  
      <div>  
      <table>  
      <tr id="z1">  
       <td>Zelle 1.1</td>  
       <td>Zelle 1.2 </td>  
      </tr>  
      <tr id="z2">  
       <td>Zelle 2.1 </td>  
       <td>Zelle 2.2 </td>  
      </tr>  
      <tr id="z3">  
       <td>Zelle 3.1 </td>  
       <td>Zelle 3.2 </td>  
      </tr>  
      </table>  
      </div>  
      </body>  
      </html>  
      
      

      viele Grüße

      Axel