"visibility:collapse" und "display:table-row" in Firefox/MSIE
Jo_S
- css
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:
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!
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??
grüße,
henman
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#
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
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
<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!).
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.
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
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.
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
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.
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.
Grundlage für Zitat #1747.
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
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
Hi,
Wo befinde ich mich?
Ardbeg: 27m, Lagavulin: 26m, Laphroig: 25m, Bowmore: 13m, Kilchoman: 10m, Bruichladdig: 2min 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
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
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
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
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