Pr0g: Tabellenspalten verziehen sich im FF oder sind zu Breit im IE

Hallo,

ich habe ein paar Probleme mit einem Tabellenlayout. Habe eine abgespeckte Variante mal online gestellt: http://pr0g.net/temp/sf/

Links ist eine Spalte für eine Navigation zu sehen, dann kommt ein großer Inhaltsteilt und rechts nochmal eine Spalte. Die zwei äußeren Spalten sollen eine feste Breite von je 150px haben. Der Inhaltsteil dann den Rest der noch verfügbaren Breite, so dass das gesamte Browserfenster ausgefüllt wird. Dies wird Erreicht in dem die Breite der Inhaltszelle (td_maincontent) auf 100% gesetzt wird.

Problem #1: Im InternetExplorer wird der Inhaltsteil zu Breit und die Seite passt bei einer Auflösung von 1024x768 schon nicht mehr ins Browserfenster. Wie bekomme ich es hin, dass die mittlere Spalte immer breit genug ist um das Browserfenster auszufüllen?

Problem #2: Im FireFox werden die beiden äußeren Spalten größer, wenn man das Browserfenster sehr klein zieht, obwohl diese eine feste Breitenangabe haben, woran liegt das und wie kann man es beheben?

MfG Pr0g

  1. Hi,

    ich habe ein paar Probleme mit einem Tabellenlayout.

    das ist schön für Dich, denn es ist ein Grund, das Mittelalter zu verlassen und endlich mal in der existierenden Welt anzukommen. Tabellen dienen der Strukturierung tabellarischer Daten, nichts anderem.

    woran liegt das

    Daran, dass Tabellen nicht für Layoutzwecke gedacht sind.

    und wie kann man es beheben?

    Beende den Missbrauch von Tabellen. Verfasse semantisches Markup und vermittle per CSS Dir genehme Darstellungsempfehlungen.

    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. Hallo Cheatah,

      ich habe ein paar Probleme mit einem Tabellenlayout.

      Beende den Missbrauch von Tabellen. Verfasse semantisches Markup und vermittle per CSS Dir genehme Darstellungsempfehlungen.

      Beende den Missbrauch von abgedroschenen Phrasen. Verweise auf semantisches Markup und vermittle dem OP genehme CSS-Darstellungsempfehlungen.

      Ergänzend noch eine Liste von Vorlagen für CSS-Dreispalter.

      Grüße
       Roland

      1. Hallo Orlando.

        Ergänzend noch eine Liste von Vorlagen für CSS-Dreispalter.

        Spalter!

        Einen schönen Sonntag noch.

        Gruß, Mathias

        --
        sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
        „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
        [HTML Design Constraints: Logical Markup]
    2. ich habe ein paar Probleme mit einem Tabellenlayout.

      das ist schön für Dich, denn es ist ein Grund, das Mittelalter zu verlassen und endlich mal in der existierenden Welt anzukommen. Tabellen dienen der Strukturierung tabellarischer Daten, nichts anderem.

      Wenn es für dich verständnisfördernd ist, möge man durchaus auch annehmen können, dass es sich um eine dreispaltige Darstellung tabellarischer Daten handelt. Das Problem bleibt das Selbe und der Herr kann von seinem hohen Ross herabsteigen und einen sinnvollen _problembezogenen_ Lösungsvorschlag geben.

      1. hallo,

        Wenn es für dich verständnisfördernd ist, möge man durchaus auch annehmen können, dass es sich um eine dreispaltige Darstellung tabellarischer Daten handelt.

        Das möchte man nicht, da du selbst ausdrücklich von Layout geschrieben hast und ein Layout nun einmal keine tabellarischen Daten enthält - deine Seite enthält sie ja auch nicht. Es gab eine Zeit (auch bei SELFHTML), in der sich alle darüber freuten, daß man mit Tabellen scheinbar wunderhübsche Layouts basteln konnte. Zu dieser Zeit war aber CSS ganz einfach noch nicht "fertig", und die Lehrmeinungen dieser Vergangenheit des Webdesigns bringen es nun mit sich, daß mancher heute immer noch meint, Tabellen für sein Layout nutzen zu müssen. Es "funktioniert" ja. Es ist bloß seit Jahren nicht mehr zeitgemäß, und es macht auch keinen richtigen Sinn, weil Tabellen nun einmal einen anderen Aufgabenbereich haben.

        Wenn es für dich verständnisfördernd ist, so mögest du doch einfach mal probieren, ob dir nicht ein tabellenfreies Layout eher entgegenkommt.

        Das Problem bleibt das Selbe

        Ohne Tabelle ist "das Problem" keines mehr - vermutlich wirst du allerdings irgendwelche neuen Probleme erfahren. Macht nichts, die kannst du ja schildern und um Hilfe bitten.

        der Herr kann [...] einen sinnvollen _problembezogenen_ Lösungsvorschlag geben.

        Der Herr hat dies bereits getan. Es mag ein wenig schroff und schwer verständlich ausgefallen sein, aber es war bereits ein Lösungsvorschlag. Und es wäre für das Forum enorm verständnisfördernd, wenn du die Forumshilfe nachlesen und lernen wolltest, daß ein Verweis zu deiner Seite so aussehen sollte: http://pr0g.net/temp/sf.

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. Dir ist bewusst, dass du gerade einen Post von Markus zitiert hast, aber mich (Pr0g, Threaderöffner) dabei ansprichst?

          1. hallo,

            Dir ist bewusst, dass du gerade einen Post von Markus zitiert hast, aber mich (Pr0g, Threaderöffner) dabei ansprichst?

            Nein, nicht wirklich. Das liegt daran, daß es zu häufig vorkommt, daß unregistrierte Forumsbesucher sich mal eben für einen anderen Namen entscheiden, selbst mitten in einem laufenden Thread. Und "Markus" hat auf eine Weise geschrieben, die die Interpretation, daß er du gewesen sein müsse, durchaus nahelegte.

            Aber egal: die Aussage für dich war, daß es wesentlich sinnvoller ist, die Tabelle eben nicht für Layoutaufgaben zu nutzen, auch wenn du das laut https://forum.selfhtml.org/?t=134652&m=873600 eben gerade _nicht_ lesen wolltest. Dann darf man allerdings nach deinen Gründen fragen, weshalb dir die Tabelle derart unverzichtbar erscheint.

            Grüße aus Berlin

            Christoph S.

            --
            Visitenkarte
            ss:| zu:) ls:& fo:) va:) sh:| rl:|
            1. Und "Markus" hat auf eine Weise geschrieben, die die Interpretation, daß er du gewesen sein müsse, durchaus nahelegte.

              Nein, ich war es aber nicht - ich schreibe nur unter meinem Nick.

              Dann darf man allerdings nach deinen Gründen fragen, weshalb dir die Tabelle derart unverzichtbar erscheint.

              Ich selbst nutze CSS Layouts (bei meiner Seite noch nicht, aber das nächste Update wird dies mitbringen, ein neues Design ist bereits auf CSS Basis in Arbeit). Jedoch ist das Layout welches hier Probleme macht nicht direkt für mich selbst und ein Tabellen Layout ist erwünscht. Also warum ist es so schwer auf das Problem einzugehen. Mir braucht keiner zu sagen, dass Tabellen für andere Zwecke gedacht sind etc. Ich weiß es - trotzdem möchte ich es so machen, also akzeptiert es doch einfach...

              1. hallo,

                Jedoch ist das Layout welches hier Probleme macht nicht direkt für mich selbst und ein Tabellen Layout ist erwünscht.

                Das heißt, dein "Kunde" will es so, ist das korrekt? Kannst du ihm nicht nahelegen, daß er mit diesem Wunsch ein veraltetes Konstruktionsprinzip verlangt?

                Also warum ist es so schwer auf das Problem einzugehen.

                Dein Problem steckt, wenn überhaupt, in http://pr0g.net/temp/sf/gfx/css/screen.css. Beschäftige dich mit den Maßen und verwende, wo nur irgend möglich, skalierende Maßangaben wie em anstelle von px. Und schau dir deine Seite mal in Opera 9 an - das ist nochmals ein extremer Unterschied zu IE 6.

                Deine CSS ist das, worum du dich kümmern solltest, die Tabelle selbst sieht korrekt aus.

                Grüße aus Berlin

                Christoph S.

                --
                Visitenkarte
                ss:| zu:) ls:& fo:) va:) sh:| rl:|
                1. Das heißt, dein "Kunde" will es so, ist das korrekt?

                  Kunde nicht direkt, aber so können wir es stehen lassen.

                  Kannst du ihm nicht nahelegen, daß er mit diesem Wunsch ein veraltetes Konstruktionsprinzip verlangt?

                  Nein, sonst würde ich hier nicht mit einem Problem bei der Tabelle ankommen.

                  Beschäftige dich mit den Maßen und verwende, wo nur irgend möglich, skalierende Maßangaben wie em anstelle von px.

                  Naja, aber die zwei Außenspalten möchte ich gerne in einer Breite von 150px haben, dies sollte doch machbar sein.

                  Und schau dir deine Seite mal in Opera 9 an - das ist nochmals ein extremer Unterschied zu IE 6.

                  Hm, für mich sieht es so aus als würde gerade Opera die Seite richtig anzeigen. Seite nicht zu breit und wenn man das Fenster klein macht verzieht sich auch nix.

                  MfG Pr0g

                  1. hallo,

                    die zwei Außenspalten möchte ich gerne in einer Breite von 150px haben, dies sollte doch machbar sein.

                    Machbar ist es, aber ob es sinnvoll ist, solltest du dir überlegen, vor allem, da du ja schon das Problem bei kleiner gezogenem Browserfenster ansprichst. Eine in px vorgegebene Breite kann sich dann nicht ändern, eine in em angegebene Breite kann das sehr wohl.

                    Hm, für mich sieht es so aus als würde gerade Opera die Seite richtig anzeigen.

                    Gut, aber du siehst selbst, daß die Darstellung im IE extrem davon abweicht - oder soll ich erst noch screenshots anfertigen?

                    Schau nach, ob du deine Klassendefinitionen wirklich an die richtigen <td> verteilt hast und ob und was deine CSS dann eventuell so vorieht, daß es der IE eben nicht anders machen kann. Der "conditional comment", den du drinstehen hast, zeigt ja, daß du differenzieren willst. Aber kannst du in einen Kommentar noch ein Linkelement wie "<link rel="stylesheet" type="text/css" href="./gfx/css/explorer.css" ...>" einfügen?

                    Grüße aus Berlin

                    Christoph S.

                    --
                    Visitenkarte
                    ss:| zu:) ls:& fo:) va:) sh:| rl:|
                    1. Machbar ist es, aber ob es sinnvoll ist, solltest du dir überlegen, vor allem, da du ja schon das Problem bei kleiner gezogenem Browserfenster ansprichst. Eine in px vorgegebene Breite kann sich dann nicht ändern, eine in em angegebene Breite kann das sehr wohl.

                      Nehmen wir mal an mein Design würde aus festen Grafiken bestehen (wird bestimmt auch wieder genug Gründe geben die dagegen sprechen, aber es soll erstmal nur eine Annahme sein), dann wäre eine variable Breite nicht erwünscht.

                      Gut, aber du siehst selbst, daß die Darstellung im IE extrem davon abweicht - oder soll ich erst noch screenshots anfertigen?

                      Hm, ich sehe bis auf den abgeschnitten Text oben neben "Ecke 1" und dem "Fehler" das die Seite im IE zu lang ist, was im richtigen Design nicht auftritt eigentlich keine Unterschiede. Was meinst du denn?

                      Aber kannst du in einen Kommentar noch ein Linkelement wie "<link rel="stylesheet" type="text/css" href="./gfx/css/explorer.css" ...>" einfügen?

                      Wie meinst du das?

                      MfG Pr0g

                      1. hallo,

                        Aber kannst du in einen Kommentar noch ein Linkelement wie "<link rel="stylesheet" type="text/css" href="./gfx/css/explorer.css" ...>" einfügen?
                        Wie meinst du das?

                        Die Theorie dazu ist mir jetzt doch ein bissel zu mühsam. Ich habs nur nochmal als Gegenprüfung auf einer meiner Seiten durchgespielt. Wenn ich so vorgehe wie du, hat die "IE-CSS" überhaupt keine Wirkung. Wenn ich aber
                          <!--[if IE]><style type="text/css">
                          ...CSS-Angaben ...
                          </style><![endif]-->
                        schreibe, wird es sehr wohl wirksam. Probiere es einfach mal aus. Wenns nicht klappt, muß man halt weitersehen.

                        Grüße aus Berlin

                        Christoph S.

                        --
                        Visitenkarte
                        ss:| zu:) ls:& fo:) va:) sh:| rl:|
                        1. Wenn ich so vorgehe wie du, hat die "IE-CSS" überhaupt keine Wirkung.

                          Ich habe der explorer.css nochmal ein BackgroundColor-Attribut für den Footer hinzugefügt. Nun kann man es vielleicht besser sehen. Zumindest bei mir ist der Footer nun im IE rot, im FF dagegen weiterhin gelb.

                          Aber ich weiß immer noch nicht genau woran es liegt, dass der IE die Seite zu groß macht und der FF die Spalten verzieht, wenn sie zu klein wird.

                        2. Mahlzeit Christoph.

                          Wenn ich so vorgehe wie du, hat die "IE-CSS" überhaupt keine Wirkung. Wenn ich aber
                            <!--[if IE]><style type="text/css">
                            ...CSS-Angaben ...
                            </style><![endif]-->
                          schreibe, wird es sehr wohl wirksam.

                          Weder Microsofts Artikel zu diesem Thema noch andere Quellen oder meine eigenen Erfahrungen mit Conditional Comments weisen auf irgendwelche Probleme hin, was das Einbinden eines weiteren Stylesheets (oder beliebigen anderen HTML-Codes) angeht.

                          Daß das, was du auf deinen Seiten "durchgespielt" hast, nicht funktionierte, hat möglicherweise andere Ursachen. Die parallele Nutzung der älteren IEs als Standalone-Version beispielsweise.

                          --
                          Once is a mistake, twice is jazz.
            2. habe d'ehre Christoph

              Dir ist bewusst, dass du gerade einen Post von Markus zitiert hast, aber mich (Pr0g, Threaderöffner) dabei ansprichst?

              Nein, nicht wirklich. Das liegt daran, daß es zu häufig vorkommt, daß unregistrierte Forumsbesucher sich mal eben für einen anderen Namen entscheiden, selbst mitten in einem laufenden Thread. Und "Markus" hat auf eine Weise geschrieben, die die Interpretation, daß er du gewesen sein müsse, durchaus nahelegte.

              Zuviel Holunder? Was soll jetzt diese dummdreiste Spekulation und Unterstellung?

              Sorry Christoph, aber Du, Gunnar und Cheatah schlagt hier in letzter Zeit einen Ton an, dass es langsam mal Zeit waere, dass von den Devs nicht nur dezente Zaunpfahlhinweise[1] kommen, sondern mal ein richtiger hochoffizieller Anschiss! Die Leute mit Fragen muessen sich nur noch veraeppelt vorkommen und glaube mir, so etwas spricht sich ganz schnell rum.

              <°)))o><

              Wilhelm

              [1] die z.b. Gunnar und Du stur ignoriert (wie z.B. von Mathias und Thomas)

              PS: Zweimal Vorschau aufgerufen, nachgedacht und trotzdem gesendet, auch wenn ich jetzt vielleicht Aerger kriege.

              1. hallo Wilhelm,

                Was soll jetzt diese dummdreiste Spekulation und Unterstellung?

                Das war es nicht, sondern es war eine Entschuldigung. Den tatsächlich zielführenden Hinweis für das angesprochene Problem findest du weiter unten.

                Sorry Christoph, aber Du, Gunnar und Cheatah schlagt hier in letzter Zeit einen Ton an,

                der sich nicht wesentlich von den auch sonst angeschlagenen "Tönen" unterscheidet.

                PS: Zweimal Vorschau aufgerufen, nachgedacht und trotzdem gesendet, auch wenn ich jetzt vielleicht Aerger kriege.

                Nö, es ist nichts, was mit der Vorschau vermeidbar gewesen wäre, festzustellen.

                Grüße aus Berlin

                Christoph S.

                --
                Visitenkarte
                ss:| zu:) ls:& fo:) va:) sh:| rl:|
              2. Hallo,

                sondern mal ein richtiger hochoffizieller Anschiss!

                Wird vorgemerkt.

                Mathias

                1. Hello out there!

                  sondern mal ein richtiger hochoffizieller Anschiss!

                  Wird vorgemerkt.

                  Von mir aus muss Wilhelm für https://forum.selfhtml.org/?t=134741&m=874407 keinen „richtigen hochoffiziellen Anschiss“ bekommen. Lassen wir das unter freier Meinungsäußerung laufen.

                  Auch wenn er sich aufplustert, wenn ich meine Meinung sage, gestehe ich ihm doch das Recht dazu zu.

                  See ya up the road,
                  Gunnar

                  PS: Nur mit Fischen schmeißen muss er nicht; IMHO hatte Christoph das in  diesem Thread nicht verdient.

                  --
                  “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        2. Mach mal halblang was geht denn hier inzwischen ab?? Erstmal bin ich nicht Prog und der Ton war hier bei SELF auch mal besser.... Ob table oder nicht steht doch gar nicht zur Debatte, nehmt halt an er braucht ne Tabelle für Daten bei der das Prob aufgetreten ist. Das meine ich mit problemorientiert. Ein Verweis auf fertige Templates ist so hilfreich wie "such bei Google", wenn er nicht auf tables verzichten kann/will/wasauchimmr.

          Das SELF Board ist für mich jedenfalls vorerst gestorben, den Umgangston kann man sich ja nicht antun. Dir viel Glück Prog, vielleicht versuchst dus mal wo anders...

    3. Komisch, ich dachte die Emailbenachrichtigung aktiviert zu haben, hab aber keine Mails bekommen.

      Beende den Missbrauch von Tabellen. Verfasse semantisches Markup und vermittle per CSS Dir genehme Darstellungsempfehlungen.

      Anfangs hatte ich in meinem Post stehen, dass ich nichts zum Thema Tabellen <-> CSS hören möchte, dies jedoch wieder rausgenommen, da ich dachte es sei nicht nötig.

      Du brauchst mich nicht über CSS Layouts zu belehren, ich habe meine Gründe in diesem Fall ein Tabellen Layout zu nutzen und damit sollte die Sache klar sein.

      Ich habe ein Problem und dachte in diesem Forum hilfe finden zu können, würde mich also über Antworten zu meinem Problem freuen ;)

      MfG Pr0g