Benjamin Kühn: &CSS - IE zerreißt Tabellen-Layout

Einen schönen guten Abend,

ja, ich weiß, Tabellen sind nicht dazu da, Layouts umzusetzen, aber es soll in diesem Fall schnell und unkompliziert gehen und mit komplett auf <div>s und CSS basierenden Layouts tu ich mich noch etwas schwer. Also bitte übt Nachsicht.

Es dreht sich um http://www.dme05b.de. Im Firefox wird alles korrekt dargestellt, aber im IE zerreißt es mir das Layout und ich seh gerade einfach den Fehler nicht. Vielleicht könnte mich jemand mit der Nase drauf tippen? Wäre klasse.

Vielen Lieben Dank und viele Grüße
der Ben

  1. Hi,

    ja, ich weiß, Tabellen sind nicht dazu da, Layouts umzusetzen, aber es soll in diesem Fall schnell und unkompliziert gehen

    dann verstehe ich umso weniger, weshalb Du Tabellen dafür verwenden willst.

    und mit komplett auf <div>s und CSS basierenden Layouts tu ich mich noch etwas schwer.

    Ich auch. Ohne ein semantisches Markup kann die Darstellung nicht funktionieren.

    Es dreht sich um http://www.dme05b.de. Im Firefox wird alles korrekt dargestellt, aber im IE zerreißt es mir das Layout und ich seh gerade einfach den Fehler nicht.

    Der IE kann mit Tabellen nicht richtig umgehen. Setze semantisches Markup mit ordentlichem CSS ein, dann hast Du weniger Probleme. Selbst im IE.

    Vielleicht könnte mich jemand mit der Nase drauf tippen? Wäre klasse.

    Tabellenlayout ist nicht nur hirnrissig, sondern hinderlich. Genau wie der Irrglaube, man müsse für den Einsatz von CSS lauter <div>s verwursten. Bei beiden Varianten wirst Du keine brauchbaren Ergebnisse erhalten - und auch keine schnellen.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi Cheatah,

      erstmal natürlich danke für deine schnelle Antwort.

      Tabellenlayout ist nicht nur hirnrissig, sondern hinderlich. Genau wie der Irrglaube, man müsse für den Einsatz von CSS lauter <div>s verwursten. Bei beiden Varianten wirst Du keine brauchbaren Ergebnisse erhalten - und auch keine schnellen.

      Mit welcher Variante dann? Semantisches Markup gut und schön, aber allein dadurch ist doch das Layout nicht umsetzbar oder verstehe ich den Begriff vielleicht falsch? Semantisches Markup habe ich immer für strukturierten Code für die Inhalte gehalten. Z.B. eben Überschriften als solche auszeichnen, usw. Liege ich da total falsch?

      Danke und Gruß,
      Ben

      1. Hi,

        Mit welcher Variante dann? Semantisches Markup gut und schön, aber allein dadurch ist doch das Layout nicht umsetzbar oder verstehe ich den Begriff vielleicht falsch?

        nein, semantisches Markup ist "nur" die Basis. Und wie wir wissen, ist die Basis die Grundlage aller Fundamente. Ebenso, wie Du beim Hausbau mit dem Fundament anfangen wirst, fängst Du bei einem Layout also mit dem Markup an; und ebenso, wie Du dem Fundament eines Hauses keine Türgriffe und Dachziegel verpassen wirst, beachtest Du bei der Erstellung des Markups nicht die derzeit gewünschte Darstellung. Nach meiner Erfahrung klappt es nur so - und zwar erschreckend gut.

        Semantisches Markup habe ich immer für strukturierten Code für die Inhalte gehalten. Z.B. eben Überschriften als solche auszeichnen, usw. Liege ich da total falsch?

        Nein, das hast Du völlig richtig verstanden. Der richtige Einsatz von Klassen, IDs und auch per se unsemantischen Elementen wie <div> und <span> gehört natürlich ebenfalls dazu.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        1. Hi Cheatah,

          nein, semantisches Markup ist "nur" die Basis. Und wie wir wissen, ist die Basis die Grundlage aller Fundamente. Ebenso, wie Du beim Hausbau mit dem Fundament anfangen wirst, fängst Du bei einem Layout also mit dem Markup an; und ebenso, wie Du dem Fundament eines Hauses keine Türgriffe und Dachziegel verpassen wirst, beachtest Du bei der Erstellung des Markups nicht die derzeit gewünschte Darstellung. Nach meiner Erfahrung klappt es nur so - und zwar erschreckend gut.

          Das klingt natürlich einleuchtend und ich werde auch zukünftig versuchen, möglichst semantisches Markup zu verwenden. Momentan kann ich mir aber irgendwie diese Vorgehensweise noch nicht ganz vorstellen, da ich eigentlich als Grundlage bzw. "Basis" immer das Grundlayout angesehen habe. Die Inhalte der Seite folgen ja erst so nach und nach. Diese möchte ich dann natürlich aber auch sinnvoll strukturieren. Habe mir inzwischen auch wieder angewöhnt <h1> zu benutzen statt z.B. <span class="ueberschrift"> oder soetwas. Einige Unarten müssen aber auf jeden Fall noch weichen und dessen bin ich mir durchaus bewusst. Als einfach empfinde ich semantisches Markup aber auf gar keinen Fall.

          Nein, das hast Du völlig richtig verstanden. Der richtige Einsatz von Klassen, IDs und auch per se unsemantischen Elementen wie <div> und <span> gehört natürlich ebenfalls dazu.

          Dann bin ich ja beruhigt, dass ich immerhin das Grundprinzip verstanden zu haben scheine.

          Danke und Gruß,
          Ben

          1. Hi,

            Momentan kann ich mir aber irgendwie diese Vorgehensweise noch nicht ganz vorstellen, da ich eigentlich als Grundlage bzw. "Basis" immer das Grundlayout angesehen habe.

            ja, das ist verständlich: Diese Denkweise ist intuitiv. CSS erfordert eine völlig andere Denke, die zunächst einmal nicht visuell ist, was der Funktionsweise unserer Gehirne leider widerspricht.

            Die Inhalte der Seite folgen ja erst so nach und nach. Diese möchte ich dann natürlich aber auch sinnvoll strukturieren.

            Genau hier musst Du ansetzen. Lerne, dass der graphische Browser höchstens(!) der zweitwichtigste Client ist - viel wichtiger ist die Suchmaschine. Und die "sieht" nicht, zumindest nicht Dein Layout. Sie kann nur von der Struktur ausgehen. Ganz nebenbei bemerkt: Suchmaschinen "sehen" ziemlich genau so, wie es ein Blinder tut. Das ist ein weiterer Grund, weshalb Barrierefreiheit so groß geschrieben wird - sie ist in der Praxis einfach nützlich.

            Habe mir inzwischen auch wieder angewöhnt <h1> zu benutzen statt z.B. <span class="ueberschrift"> oder soetwas.

            Ein hervorragender Anfang.

            Einige Unarten müssen aber auf jeden Fall noch weichen und dessen bin ich mir durchaus bewusst. Als einfach empfinde ich semantisches Markup aber auf gar keinen Fall.

            Ist es aber. Das einzig schwierige daran ist, sich vom bisherigen Denken zu trennen. Zugegeben, das fällt den meisten immens schwer :-) ist aber trotzdem eine Sache, die man nur ein einziges Mal machen muss. Wenn Du die Trennung von Struktur und Layout, die Abstraktion des Markups von der Darstellung einmal verstanden hast, wirst Du Dich öfter dabei erwischen, dass Du Dich darüber wunderst, wie einfach irgend etwas zu erreichen war. In einem guten, semantischen Markup ist ein Layout - beinahe egal wie es aussieht - Pipifax.

            Cheatah

            --
            X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
            X-Will-Answer-Email: No
            X-Please-Search-Archive-First: Absolutely Yes
            1. Hi Cheatah,

              vielen Dank für deine motivierenden und aufklärenden Worte und auch dafür, dass du so viel Geduld mit mir hast! Als angehender Mediengestalter fällt es mir natürlich ziemlich schwer von meiner bisherigen Sicht- bzw. Denkweise Abstand zu nehmen, aber ich werde mir die größte Mühe geben. ;-)

              Ich werde mich noch einmal etwas schlau lesen und dann versuchen, die Seite erstmal mit semantischem Markup zu strukturieren und erst dann das Layout anzupassen bzw. einzufügen. Das wird wohl anfangs ungewohnt und kompliziert, aber ich denke auch, dass es im Nachhinein sehr praktisch sein kann. Außerdem möchte ich mir eh einen wesentlich sauberen Stil beim Schreiben von allem möglichen Code (egal ob HTML, PHP, o.ä.) aneignen und ich denke, dass somit ein großer Beitrag dazu geleistet wird.

              In diesem Sinne nochmals danke und gute Nacht,
              Ben