Jo_S: "visibility:collapse" und "display:table-row" in Firefox/MSIE

Ich kriege hier gerade die völlige Krise. Vielleicht habt ihr ja einen heißen Tipp.

Es geht (wie immer) um die unterschiedliche style-Interpretation von MSIE und Feuerfuchs. Folgendes Problem:

  • Ich habe ein tabellarisch aufgebautes Abfrageformular.
  • Wenn der User den Radiobutton mit dem Wert "ja" anklickt, soll die nächste Frage erscheinen. Klickt er den Radiobutton "nein", bleibt sie unsichtbar.
  • Das ginge eigentlich ganz einfach mit einem Eventhandler auf dem Radiobutton:
    <input type="radio" name="Salinge" value="ja" onClick="document.getElementById('sa1').style.visibility='visible'">
    und dann die Tabellenreihe, in der die nächste Frage steht, einfach auszeichnen mit
    <tr style="visibility:collapse" id="sa1">
  • In Firefox kein Problem, aber MSIE kapiert "collapse" nicht und gibt ne Fehlermeldung raus.

Also die nächste Möglichkeit:
<input type="radio" name="Salinge" value="ja" onClick="document.getElementById('sa1').style.display='table-row'">
und die anzuzeigende Tabellenreihe auszeichnen mit
<tr style="display:none" id="sa1">
Ratet mal - Firefox kein Problem, MSIE keine Ahnung. "table-row" kennt er auch nicht. Super, dieser Browser.

Letzte halbwegs simple Möglichkeit, die mir einfällt:
<input type="radio" name="Salinge" value="ja" onClick="document.getElementById('sa1').style.display='inline'">
und auf der Tablerow die Auszeichnung
<tr style="display:none" id="sa1">
Und jetzt wird's spannend: MSIE macht's (auch mit "display:block" und "display:inline-block")! Und Firefox macht nun etwas völlig verrücktes: statt einfach die tr (mit allen zugehörigen td's) anzuzeigen, quetscht er die gesamte tr in die vorderste Tabellenzelle.

Anschauen könnt ihr das Beispiel hier:
http://www.segel-taschen.de/catalog/sonderanfertigung2.php
Unter der Zeichnung (am Ende der Seite) sind die Radiobuttons ja/nein. Klickt mal bei der ersten Frage im MSIE auf die Buttons und dann mit Firefox. Ich habe die Tabellenzellen der versteckten 2. Frage mal farbig hinterlegt (rot: "colspan=3", grün ist die 4. Zelle der Tabelle). Dann sieht man schön, wie der Mozilla alles in eine Zelle quetscht.

Ich bin mit meinem Latein am Ende. Warum zum Henker macht er das? Und: WAS TUN??

Danke für jeden Tipp!

  1. hallo,

    Ich kriege hier gerade die völlige Krise. Vielleicht habt ihr ja einen heißen Tipp.

    Psychater.

    • In Firefox kein Problem, aber MSIE kapiert "collapse" nicht und gibt ne Fehlermeldung raus.

    die da wäre?

    Ratet mal - Firefox kein Problem, MSIE keine Ahnung. "table-row" kennt er auch nicht. Super, dieser Browser.

    ich rate.. Du hast also keine Ahnung und verschmähst trotzdem den Internet Explorer? hm..

    Und jetzt wird's spannend: MSIE macht's (auch mit "display:block" und "display:inline-block")!

    Oh nein, ich hab mein Popcorn verschüttet vor Schreck.

    Ich bin mit meinem Latein am Ende. Warum zum Henker macht er das? Und: WAS TUN??

    • validieren
    • <http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform@title=Quirks-Modus verlassen>
    • ruhig bleiben
    • einen Arzt konsultieren, sollte der Kopf doch explodieren

    grüße,
    henman

    --
    "Sir! We are surrounded!" - "Excellent! We can attack in any direction!"
    1. Bei dem zugrunde liegenden Quelltext handelt es sich um OS-commerce, also ein open source Projekt. Schlimm genug, dass dort immer noch mit verschachtelten Tabellen "layoutet" wird. Mit den Quellcode-Sünden einer globalen Entwicklergemeinschaft verschwende ich allerdings nicht meine Zeit. Validieren lasse ich nur meine eigenen Quellcodes, in der Mehrzahl der Fälle sogar erfolgreich.

      Insofern sind diese stereotypen Hinweise auf den Validator schlicht kontraproduktiv, zumal sie NICHTS mit meiner eigentlichen Frage zu tun haben. (Das wäre dir sicherlich rasch aufgefallen, wenn du das von dir empfohlene Validator-Ergebnis selber auch mal in Augenschein genommen hättest).

      Hast du eine konkrete Lösung, wäre ich dir für einen konstruktiven Hinweis sehr dankbar. Hast du keine, leite ich gerne weiter an Dieter Nuhr:
      http://video.google.de/videoplay?docid=763949850889929695#

      1. Um weitere "Tipps" im Stile eines "Henman" zu vermeiden und zum eigentlichen Problem zurückzukehren: hier noch einmal in ganz reduzierter Form ganz anschaulich das Problem:
        http://www.segel-taschen.de/catalog/test.htm

      2. hallo,

        Bei dem zugrunde liegenden Quelltext handelt es sich um OS-commerce, also ein open source Projekt. Schlimm genug, dass dort immer noch mit verschachtelten Tabellen "layoutet" wird. Mit den Quellcode-Sünden einer globalen Entwicklergemeinschaft verschwende ich allerdings nicht meine Zeit. Validieren lasse ich nur meine eigenen Quellcodes, in der Mehrzahl der Fälle sogar erfolgreich.

        Du nimmst also lieber eine kaputte Lösung von anderen, als selbst für Qualität zu sorgen?

        Hast du eine konkrete Lösung, wäre ich dir für einen konstruktiven Hinweis sehr dankbar.

        <td height="24" colspan="3" align="left" valign="top" class="main">Hat Ihr Rigg Salinge?</td>
        colspan ist hier 3, damit das td die gleiche Länge hat wie die drei darüber liegenden, das zieht sich über jede dieser Tabellenzeilen.
        dieses colspan gilt aber nicht für die ausklappbaren Teile, darum quetschen sie sich in die Länge des einen td ganz links oben.

        Hast du keine, leite ich gerne weiter an Dieter Nuhr:
        http://video.google.de/videoplay?docid=763949850889929695#

        ich kann das Video dank mangelnder Modem-Leistung und fehlender Lust, die Ladezeit abzuwarten, nicht sehen, darum bleibt deine Spitze zumindest bei mir leider stumpf :)

        grüße,
        henman

        --
        "Sir! We are surrounded!" - "Excellent! We can attack in any direction!"
        1. <td height="24" colspan="3" align="left" valign="top" class="main">Hat Ihr Rigg Salinge?</td>
          colspan ist hier 3, damit das td die gleiche Länge hat wie die drei darüber liegenden, das zieht sich über jede dieser Tabellenzeilen.
          dieses colspan gilt aber nicht für die ausklappbaren Teile, darum quetschen sie sich in die Länge des einen td ganz links oben.

          Das kann nicht die Erklärung sein. Aus 2 Gründen:
          1.) Nicht nur das colspan der ersten td wird ignoriert, BEIDE td's der aufklappenden Tablerow werden auf die Breite EINES td's der übrigen Tabelle komprimiert. Darüber hinaus fragt sich: WARUM sollte das colspan der ausklappenden Tabellenreihe ignoriert werden?
          Ich tippe mal ganz vage darauf, dass Firefox keine Tabellen gerendert kriegt, die während des Seitenaufbaus auf display:none gesetzt waren (warum auch immer).
          2.)MSIE macht's (ausnahmsweise mal!).

      3. Lieber Jo_S,

        Insofern sind diese stereotypen Hinweise auf den Validator schlicht kontraproduktiv, zumal sie NICHTS mit meiner eigentlichen Frage zu tun haben.

        hier irrst Du sehr. Wenn formale Fehler im HTML-Code stehen, dann muss der Browser in den Ratemodus. Was beim Herumraten an visuellen Späßen entstehen kann, darüber informiert quirksmode.org.

        Wer also eine browserübergreifend annähernd gleiche Anzeige will, muss unausweichlich syntaktisch korrekte Dokumente benutzen, da ansonsten dieser Wunsch vielleicht fromm, jedoch nicht sinnvoll erreichbar ist.

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. hier irrst Du sehr. Wenn formale Fehler im HTML-Code stehen, dann muss der Browser in den Ratemodus. Was beim Herumraten an visuellen Späßen entstehen kann, darüber informiert quirksmode.org.

          Wer also eine browserübergreifend annähernd gleiche Anzeige will, muss unausweichlich syntaktisch korrekte Dokumente benutzen, da ansonsten dieser Wunsch vielleicht fromm, jedoch nicht sinnvoll erreichbar ist.

          Hallo Felix,

          ich stelle nicht den Sinn valider Dokumente in Frage (da bin ich ganz bei dir!), sondern den Sinn pauschaler stereotyper Hinweise auf den W3C-Validator, obwohl sich die eigentliche Frage völlig unabhängig davon gestaltet.

          Ich möchte auch keine Diskussion über Sinn und Zweck der Validatoren vom Zaun brechen - darum geht es nicht, das ist müssig. Meine eigenen Dokumente sind valide und so soll es ja auch sein.

          Aus diesem Grund habe ich das "Kernproblem" ja noch einmal online gestellt (http://www.segel-taschen.de/catalog/test.htm), in einem validen Dokument... mit exakt identischem Ergebnis. Das Problem existiert völlig unabhängig vom (invaliden) os-commerce-Quellcode.

          Nur: der Lösung habe ich mich dadurch noch keinen Millimeter genähert.

          Viele Grüsse, Jo

  2. Anschauen könnt ihr das Beispiel hier:
    http://www.segel-taschen.de/catalog/sonderanfertigung2.php
    Unter der Zeichnung (am Ende der Seite) sind die Radiobuttons ja/nein. Klickt mal bei der ersten Frage im MSIE auf die Buttons und dann mit Firefox. Ich habe die Tabellenzellen der versteckten 2. Frage mal farbig hinterlegt (rot: "colspan=3", grün ist die 4. Zelle der Tabelle). Dann sieht man schön, wie der Mozilla alles in eine Zelle quetscht.

    Ich bin mit meinem Latein am Ende. Warum zum Henker macht er das? Und: WAS TUN??

    warum nimmst du anstatt einer Tabellzeile nicht einfach ein DIV?

    Oder noch besser, du blendest diese Zeilen mit JS aus, dann musst du beim einblenden nur ein style.display = '' machen (das setzt die Eigenschaft wieder auf den ursprünglichen Wert), das kann auch der IE.

    JS im HTML Code ist sowieso nicht schön, auch würde diese Variante Besucher die JS nicht automatisch an haben helfen.

    Struppi.

  3. Hi,

    Ratet mal - Firefox kein Problem, MSIE keine Ahnung. "table-row" kennt er auch nicht. Super, dieser Browser.

    ja das ist aber doch wirklich nix neues. Warum toggelst Du nicht einfach zwischen "" und "none"?

    Gruesse, Joachim

    --
    Am Ende wird alles gut.
    1. Warum toggelst Du nicht einfach zwischen "" und "none"?

      Hallo Joachim,

      das war der alles entscheidende Hinweis, auf den ich gehofft hatte. Auf die Idee, dem display ein LEERES Attribut zuzuweisen, bin ich schlicht nicht gekommen. Simpel, effektiv und cross-Browser-fähig - so mag ich das. Danke!

      Alle Ergebnisse habe ich hier zusammen gefasst:
      http://www.segel-taschen.de/catalog/test.htm

      Ich lasse das mal für andere als Lösung online stehen...

      @Cheetah: du hast natürlich völlig Recht mit deinem Hinweis auf die getrennte Verwendung von CSS und JavaScript. Aber wenn du das Chaos in os-Commerce kennst, ist die weitgehend fehlende Trennung noch das kleinste Problem. ;-)
      Dummerweise schreibt sich so ein Shopsystem inklusiv CRM, Zahlungsmodulen, Warenwirtschaft etc. nicht mal "eben kurz nebenbei", da greift man gerne auf Vorarbeit zurück. Sonst könnte man das os-Commerce-HTML ganz eindeutig von Grund auf besser machen.

  4. Hi,

    <input type="radio" name="Salinge" value="ja" onClick="document.getElementById('sa1').style.display='inline'">
    Und jetzt wird's spannend: MSIE macht's (auch mit "display:block" und "display:inline-block")!

    für den IE hat ein table-row-Element den display-Wert "block". Das ist eine bekannte Absurdität.

    Und Firefox macht nun etwas völlig verrücktes: statt einfach die tr (mit allen zugehörigen td's) anzuzeigen, quetscht er die gesamte tr in die vorderste Tabellenzelle.

    Natürlich, Du hast einem standardkonformen Browser ja auch gesagt, dass das <tr>-Element keine Tabellenzeile mehr ist, sondern ein Block-Element (oder Inline, je nachdem). Entsprechend versucht er es darzustellen. Dass dies nicht Deinem Wunsch entspricht, weißt Du selbst, schon dadurch, dass Du es zu Anfang mit display:table-row versucht hast.

    Ich bin mit meinem Latein am Ende. Warum zum Henker macht er das?

    Der Firefox? Weil Du's ihm gesagt hast. Der IE? Weil er nicht mal als Parkwächter taugen würde.

    Und: WAS TUN??

    Dem IE etwas anderes geben als jedem anderen. Vor allem aber Darstellung aus Logik trennen - im JavaScript-Code hat Dein style.irgendwas nichts verloren, solange die Werte extremststst[1] hervorragend im CSS-Code aufgehoben werden können. Klassifiziere auszublendende Bereiche z.B. als "disabled" oder etwas anderes Passendes.

    Cheatah

    [1] Und noch ein paar "st" ans Ende, bitte.

    --
    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,

      Der IE? Weil er nicht mal als Parkwächter taugen würde.

      Als Waechter braucht man schon besondere Qualifikationen, das stimmt.

      Kleines Raetsel am Rande:

      Wo befinde ich mich?
      Ardbeg: 27m, Lagavulin: 26m, Laphroig: 25m, Bowmore: 13m, Kilchoman: 10m, Bruichladdig: 2m

      (Alle Entfernungen geschaetzt, in landestypischer Einheit, Strasse, nicht Luftlinie, es gibt auf diesem Stueck Erde m.W. noch mindestens 2 weitere Hersteller des typischen Getraenks)

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
      1. Hallo,

        Kleines Raetsel am Rande:
        Wo befinde ich mich?
        Ardbeg: 27m, Lagavulin: 26m, Laphroig: 25m, Bowmore: 13m, Kilchoman: 10m, Bruichladdig: 2m

        in einer gut ausgestatteten Spirituosen-Großhandlung? ;-)

        Ciao,
         Martin

        --
        Zwei Politiker auf dem Weg zum Sitzungssaal: "Was sagten Sie in ihrer Rede neulich noch zur Rentenreform?" - "Nichts." - "Ja, schon klar. Aber wie haben Sie es formuliert?"
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. Hi,

          Wo befinde ich mich?
          Ardbeg: 27m, Lagavulin: 26m, Laphroig: 25m, Bowmore: 13m, Kilchoman: 10m, Bruichladdig: 2m

          in einer gut ausgestatteten Spirituosen-Großhandlung? ;-)

          Fast richtig.

          Zumindest besteht dort die Gefahr, wegen Alkohols am Lenker verwarnt zu werden, ohne was getrunken zu haben.
          Die Luft dort ist sehr whisky-haltig.

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          O o ostern ...
          Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
          1. Hallo,

            Wo befinde ich mich?
            Ardbeg: 27m, Lagavulin: 26m, Laphroig: 25m, Bowmore: 13m, Kilchoman: 10m, Bruichladdig: 2m
            in einer gut ausgestatteten Spirituosen-Großhandlung? ;-)
            Fast richtig.
            Zumindest besteht dort die Gefahr, wegen Alkohols am Lenker verwarnt zu werden, ohne was getrunken zu haben.
            Die Luft dort ist sehr whisky-haltig.

            verstehe. Dann steht das 'm' bei den Entfernungsangaben auch nicht für Meter, wie ich erst dachte, sondern Meilen.
            Ich bin es eigentlich gewöhnt, dass Meilen mit 'mi' abgekürzt werden. Aber vielleicht ist das nur in den USA üblich.

            Viel Spaß und gute Reise noch,
             Martin

            --
            Männer sind ungerecht: Sie sehen immer nur den Baum, den eine Frau mit dem Auto gerammt hat. Aber die vielen Bäume, die sie nicht einmal gestreift hat, sehen sie nicht.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      2. Hi,

        Wo befinde ich mich?
        Ardbeg: 27m, Lagavulin: 26m, Laphroig: 25m, Bowmore: 13m, Kilchoman: 10m, Bruichladdig: 2m

        ich tippe mal auf Port Charlotte. Davon habe ich einen 6-Jährigen (der natürlich eigentlich ein Bruichladdich ist).

        es gibt auf diesem Stueck Erde m.W. noch mindestens 2 weitere Hersteller des typischen Getraenks)

        Islay ist kein Stück Erde, sondern ein starkes Indiz dafür, dass ich als Atheist mich irre. Trink für mich ein paar mit ... und schau mal, ob sich irgendwas aus Port Ellen mitnehmen lässt!

        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. Aloha 'oe,

          ich tippe mal auf Port Charlotte. Davon habe ich einen 6-Jährigen (der natürlich eigentlich ein Bruichladdich ist).

          Es gibt tatsächlich sechsjährige Whiskys? Kann man die auch ruhigen Geschmackes trinken?

          Sláinte

          Volker

          --
          „I conclude that there are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies."
          - Tony Hoare
        2. Hi,

          ich tippe mal auf Port Charlotte.

          Genau. Im ehemaligen Whisky-Lagerhaus.

          (inzwischen bin ich ein paar zig km weiter)

          Islay ist kein Stück Erde, sondern ein starkes Indiz dafür, dass ich als Atheist mich irre. Trink für mich ein paar mit ... und schau mal, ob sich irgendwas aus Port Ellen mitnehmen lässt!

          Ich bin mit dem Fahrrad unterwegs, das schraenkt die Transportmoeglichkeit extrem ein.
          Ausserdem: die Whiskys sind mir zu peaty ...

          Und Scotch ist in Deutschland billiger als in Schottland ...

          cu,
          Andreas

          --
          Warum nennt sich Andreas hier MudGuard?
          O o ostern ...
          Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.