firefox stellt tabellen falsch dar

Du benötigst Hilfe bezüglich Firefox? Bitte stelle deine Frage im öffentlichen Bereich des Forums und nicht per Konversation an wahllos ausgesuchte Benutzer. Wähle dazu einen passenden Forenbereich, zum Beispiel „Probleme auf Websites“ oder „Erweiterungen und Themes“ und klicke dann rechts oben auf die Schaltfläche „Neues Thema“.
  • hallo zusammen,


    kurz vorweg: ich habe meine eigene website ganz bewußt mit konventionellen tabellen erstellt. da webbrowser css immer noch unterschiedlich interpretieren und ich hier nur die wahl zwischen dem kleinsten gemeinsamen nenner oder je nach browser unterschiedlichen erscheinungsbildern, habe ich mich dafür entschieden. zumindest dachte ich, daß ich damit keine darstellungsprobleme haben sollte.
    normalerweise ist dem auch so. doch nun habe ich eines und komme nicht dahinter, woran das liegen mag.


    als beispiel zum gucken soll folgender link dienen:
    http://be-sign.net/pages/er/bildung_sozial.html


    die zeile, in der der farbstreifen, das bild und die flash-navi liegen ist exakt 96px hoch. so ist die tabellenreihe angelegt und genau so hoch sind auch die inhalte. in der praxis passiert mit der tabellenhöhe folgendes:


    mac
    - safari: 96px
    - firefox: 99px


    windows xp
    - firefox: 101px
    - IE7: 96px
    - safari: 96px


    opensuse linux
    - firefox: 96px
    - koquerer: 96px


    firefox scheint bei mac und windows aus der reihe zu tanzen. bei linux stimmen im firefox zwar die tabellen, dafür weichen die farben aber ganz hässlich ab.
    wie kommt es, daß firefox auf jeder plattform anders abweicht und wie muss ich tabellen so definieren, daß firefox sie korrekt darstellt?


    grüße
    bernd

    macpro 2x2,66 xeon, 4gbyte ram, 1750gbyte hdd
    firefox, safari, camino jeweils aktuell (mac os x)
    firefox, ie jeweils aktuell (win xp via paralells)

  • Hallo,


    ich kann bestätigen, dass Win XP mit FF 3.0.1 101px benötigt, bei Server2003 und FF3.0.1 sind es 100px.


    Der IE (7er) auf beiden OS mit 96px.


    Allerdings hält sich der Firefox absolut strikt an die W3C-Standards. Der Validator hierzu bringt immer 19 Fehler, nicht im unmittelbaren Zusammenhang mit den betreffenden Tags, aber doch auch im Bereich der genannten "Zeile" mit Film/Bild.


    Eventuell führt dies ja dazu, dass bestimmte Folgeelemente dann ebenfalls nicht konform umgesetzt werden.


    Prüfe mal selbst, als Webdesigner kannst Du mit den Meldungen bestimmt mehr anfangen: Link W3C

    Meine aktuell benutzte Konfiguration !
    Nicht der Wind bestimmt die Richtung, sondern das Segel ! (Lao Xiang, China)
    Wandel und Wechsel liebt, wer lebt ! (Richard Wagner, Bayreuth)
    Seit wann sind wir dem Wähler - und nicht nur Gott - Rechenschaft schuldig ?! (CSU, München)

  • hi liracon,


    danke für deine rückmeldung und den link zur validierung. ich habe mir das angesehen (bei mir wurden 14 "fehler" angezeigt).
    bei allen meldungen zu tabellenatttributen wird bemängelt, daß die verwendeten tags beim dokumententyp "Strict" fehl am platze seien und man stattdessen den dokuemtentyp "Transitional" wählen sollte. diese meldung ist insofern merkwürdig, als daß ich den dokuemtentyp "Transitional" gewählt habe. absichtlich :)
    die meldungen zum flash-inhalt bemängeln, dass diverse elemente undefiniert wären. diese sind aber alle definiert (sonst würde die animation ja auch nicht dargestellt werden).


    gerade weil alles so ist, wie es sein sollte, habe ich ja große fragenzeichen. auch webdesigner stehen bisweilen vor einem rätsel... besonders, da FF unter linux absolut korrekt arbeitet (abgesehen von den farben).


    sogar der exot "opera" bekommt die seite richtig dargestellt. es mag ja sein, daß FF genauer als alle anderen ist. aber kann es sein, daß ALLE anderen browser bei einem derartig standardisierten element wie der tabelle mist bauen und nur die abweichungen des FF standart sind?


    gruß
    bernd

    macpro 2x2,66 xeon, 4gbyte ram, 1750gbyte hdd
    firefox, safari, camino jeweils aktuell (mac os x)
    firefox, ie jeweils aktuell (win xp via paralells)

  • Nebenbei bemerkt: Die Beta vom IE8 stellt deine Seite aktuell genauso dar wie der Firefox. Ich weiß woran es liegt, aber bevor ich es dir verrate, gibt's noch eine kleine Meditation über die (allsamt korrekt erkannten) Fehler auf deiner Seite :P


    Zitat von be-sign

    bei allen meldungen zu tabellenatttributen wird bemängelt, daß die verwendeten tags beim dokumententyp "Strict" fehl am platze seien und man stattdessen den dokuemtentyp "Transitional" wählen sollte.

    Nein, das steht dort nicht. Es handelt sich um eine allgemeine Beschreibung, die erklärt, dass die Fehlermeldung "there is no attribute..." generell oft dadurch verursacht wird, dass man Transitional-Code als Strict-Code deklariert hat. Das Attribut height existiert bei <tr> allerdings auch in HTML 4.01 Transitional nicht. Wenn man Tabellen dafür benutzt, wofür sie wirklich gedacht sind, muss man eigentlich keine Zellen- oder Zeilenhöhe festlegen. Falls das wirklich mal sein soll/muss, macht man das notfalls mit CSS.


    Zitat von be-sign

    die meldungen zum flash-inhalt bemängeln, dass diverse elemente undefiniert wären. diese sind aber alle definiert (sonst würde die animation ja auch nicht dargestellt werden).

    <embed> ist kein standardkonformes HTML-Element und war es nie. Netscape 4 hat es einst eingeführt und weil manche Webdesigner Objekte bis heute fehlerhaft einbetten (bzw. es von Go Live falsch gemacht bekommen), interpretieren es die meisten Browser notgedrungen. Korrektes HTML ist es aber nicht. Das Verhalten von <embed> ist undefiniert und die tatsächliche Reaktion der Browser somit allenfalls Konsens. Die Fehlermeldung ist aber richtig: Es gibt kein Element <embed>!



    Davon aber abgesehen: Dein Problem hat nichts mit den gefundenen Fehlern zu tun, sondern mit einem generellen Stolperstein von Tabellen-Layouts, der wenig bekannt ist und wohl schon einige Webmaster zur Verzweiflung getrieben hat: Die Baseline-Positionierung.


    Eine Quick-and-Dirty-Lösung wäre, im Stylesheet (bei dir also die Datei be-sign.css) ganz oben folgende Zeile einzufügen:

    Code
    * {vertical-align:top;}

    Laut Firebug wird die Seite dann so dargestellt, wie du es vermutlich willst.

  • hallo PIGSgrame,


    vielen dank für die direkte antwort. da hab ich was gelernt. :wink:


    Zitat

    Nein, das steht dort nicht. Es handelt sich um eine allgemeine Beschreibung, die erklärt, dass die Fehlermeldung "there is no attribute..." generell oft dadurch verursacht wird, dass man Transitional-Code als Strict-Code deklariert hat. Das Attribut height existiert bei <tr> allerdings auch in HTML 4.01 Transitional nicht. Wenn man Tabellen dafür benutzt, wofür sie wirklich gedacht sind, muss man eigentlich keine Zellen- oder Zeilenhöhe festlegen. Falls das wirklich mal sein soll/muss, macht man das notfalls mit CSS.


    das hatte ich wohl mißverstanden. daß css eleganter wäre ist korrekt. da aber gerade bei css auch abweichungen bei den browsern bestehen, wollte ich mit einer tabelle auf nummer sicher gehen. sobald genug zeit ist, werde ich das layout in css versuchen.


    Zitat

    <embed> ist kein standardkonformes HTML-Element und war es nie. Netscape 4 hat es einst eingeführt und weil manche Webdesigner Objekte bis heute fehlerhaft einbetten (bzw. es von Go Live falsch gemacht bekommen), interpretieren es die meisten Browser notgedrungen. Korrektes HTML ist es aber nicht. Das Verhalten von <embed> ist undefiniert und die tatsächliche Reaktion der Browser somit allenfalls Konsens. Die Fehlermeldung ist aber richtig: Es gibt kein Element <embed>!


    das habe ich so nie mitbekommen, weil ich es tatsächlich "von GoLive falsch gemacht bekomme". danke für den hinweis. auch das werde ich mir ansehen.


    Zitat

    Eine Quick-and-Dirty-Lösung wäre, im Stylesheet (bei dir also die Datei be-sign.css) ganz oben folgende Zeile einzufügen:
    Code:
    * {vertical-align:top;}
    Laut Firebug wird die Seite dann so dargestellt, wie du es vermutlich willst.


    das habe ich mal probiert und festgestellt, daß dann alle tabelleninhalte an der oberen kante hängen. auch die textnavi. aber in FF tut der rest dann perfekt.
    anschließend habe ich vertical-align:top; versucht nur auf die betreffenden zellen anzuwenden. das zeigt aber im FF keine wirkung.
    liegt vermutlich daran, daß ich css bislang nur für textformatierung verwendet habe und hier noch enorm nachholbedarf sehe.
    hast du auf die schnelle einen tipp für ein zellenbeschränktes vertical-align:top;?


    vielen dank und grüße
    bernd

    macpro 2x2,66 xeon, 4gbyte ram, 1750gbyte hdd
    firefox, safari, camino jeweils aktuell (mac os x)
    firefox, ie jeweils aktuell (win xp via paralells)

  • Es geht sogar ohne CSS, wie ich gerade gesehen habe. Im oben verlinkten Artikel steht ja, dass im "Almost Standards Mode", also u.a. dem von dir verwendeten HTML 4.01 Transitional, Bilder nur dann an der Baseline ausgerichtet werden, wenn es im gleichen Blocklevel zusätzlichen Text gibt. Der Firefox verhält sich hier ganz konsequent: Da es offiziell kein Element <embed> gibt, stellt er sich dumm und will nicht wissen, ob dieses Element zusätzlichen Text enthält oder nicht.


    Die Lösung besteht in deinem Fall deshalb bereits darin, das Navigations-Flash-Objekt standardkonform einzubetten. Ersetze dazu diesen (falschen) Codeteil:

    Code
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="96" width="256">
     <param name="movie" value="../../resources/general/navi.swf">
     <param name="quality" value="best">
     <param name="play" value="true">
     <embed height="96" pluginspage="http://www.macromedia.com/go/getflashplayer" src="../../resources/general/navi.swf" type="application/x-shockwave-flash" width="256" quality="best" play="true">
    </object>

    durch diesen:

    Code
    <object type="application/x-shockwave-flash" data="../../resources/general/navi.swf" height="96" width="256">
     <param name="movie" value="../../resources/general/navi.swf">
     <param name="quality" value="best">
     <param name="play" value="true"> 
    </object>

    Diese Korrektur hat den positiven Nebeneffekt, dass die umgebende Tabelle ihre Elemente dann wie gewünscht ausgrichtet.


    Nun gibt es nur noch ein Problem, das in obigem Artikel auch angesprochen wird: Die CSS-Spezifikation schreibt eigentlich die Ausrichtung an der "Baseline" vor, der "Almost Standards Mode" rendert hier also bewusst fehlerhaft und wir nutzen das gerade wider bessers Wissen aus :P. Da das Verhalten der Fehlerkorrektur von Browsern aber nicht definiert ist, kann man nicht davon ausgehen, dass alle standardkonformen Browser es genauso machen. Zur Sicherheit solltest du also noch folgende Zeile in dein Stylesheet einfügen:

    Code
    object {vertical-align:top;}


    Falls du die HTML-Seite jetzt noch nicht ändern willst, kannst du übergangsweise auch alles so lassen wie jetzt und im Stylesheet nur folgende Zeile ergänzen:

    Code
    object, embed {vertical-align:top;}

    Ich empfehle dies aber ausdrücklich nicht, nutze lieber gleich die Chance, den HTML-Code zu bereinigen ;)
    Der Nachteil dieser Methode ist außerdem, dass sie zwar im Firefox funktioniert, aber andere Browser interpretieren CSS-Eigenschaften, die einem nicht definierten Element zugewisen werden, vielleicht wieder nicht.



    Anmerkung: Falls dich interessiert, warum der untere Einbettungs-Code "richtig" ist, der obere aber nicht: Ich habe mich vor einiger Zeit mal ausführlich darüber ausgelassen und man findet natürlich auch anderswo etwas dazu :)

  • wow! das ist genial. funktioniert prima. vielen dank.


    habe das code-tag getauscht und gut ist. golive zeigt jetzt im layout zwar einen merkwürdigen platzhalter an, das ist aber das kleinere problem.


    vielen dank für deine hilfe - man lernt nie aus :)


    grüße
    bernd

    macpro 2x2,66 xeon, 4gbyte ram, 1750gbyte hdd
    firefox, safari, camino jeweils aktuell (mac os x)
    firefox, ie jeweils aktuell (win xp via paralells)