firefox stellt tabellen falsch dar

be-sign

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

liracon

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

be-sign

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

PIGSgrame

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

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).

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.

be-sign

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

PIGSgrame

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

be-sign

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