Doctype:Strict statt Transitional unf FF zerschiesst Tabelle

MS Master

Hi all,

habe ein "kleines" problem mit dem FF nach änderung des Doctypes eines HTML Dokumentes:

Vorher :

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

danach

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

. Ansonsten keine änderung an der Datei, da ich nur wissen wollte, ob der Code auch den "strengeren" Regeln entsprechen würde.

Das ist der Hauptcode in der Testpage

Code

<table width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td style="width: 18px; height: 18px"><img src="ecke_oben_links.gif" width="18" height="18" alt="" /></td>
		<td class="main_balken_oben">Test1</td>
		<td style="width: 18px; height: 18px"><img src="ecke_oben_rechts.gif" width="18" height="18" alt="" /></td>
	</tr>
	<tr>
		<td style="width: 18px" class="main_balken_links">&nbsp;</td>
		<td><hr />Test2</td>
		<td style="width: 18px" class="main_balken_rechts">&nbsp;</td>
	</tr>
	<tr>
		<td style="width: 18px; height: 14px"><img src="ecke_unten_links.gif" width="18" height="18" alt="" /></td>
		<td class="main_balken_unten">&nbsp;</td>
		<td style="width: 18px; height: 14px"><img src="ecke_unten_rechts.gif" width="18" height="18" alt="" /></td>
	</tr>
</table>

Alles anzeigen

Ok, das war ein einfacher Table, vier ecken, vier Balken, quasi ein einfaches abgerundetes Quadrat, wie es auf tausenden von Seiten immer in gleicher bauart zu sehen ist.

Nun das Problem : Obwohl der Code 100% Fehlerfrei ist, sowohl laut Tidy, als auch laut W3C Validator, sieht das ergebnis sobald ich "strict" aktiviere im FF ziemlich "bescheiden" aus.

Im IE sieht es beides male gleich aus, im FF im Transitional Modus auch ok, aber im Strict Modus ist plötzlich nach dem 1. TR Tag eine dünne weiße Linie zu sehen, die das Table zerstört.

Ich dachte erst, es würde an der Höhe liegen, aber unten habe ich sogar nur eine Höhe von 14 px, und da sieht es ok aus, genau wie erwünscht.

Wieso kommt der FF plötzlich auf die Idee, oben eine dünne weiße linie hinzuzufügen.

Wie gesagt, auser dem Doctype wurde am Dokument/CSS/Bilder etc. nichts geändert. Transitional = OK, Strict = Geisterlinie.

Hat dafür jemand eine erklärung ?

bugcatcher

IE kümmert sich nicht sonderlich um DocTypes.... Firefox schon. Und nur weil ein Validator sagt, die benutzen Befehle sind OK, keisst das nicht, dass die Logik dahinter in Ordnung ist.

Gib uns lieber mal einen link zu deinem Problem. ; )

MS Master

Also:

So sieht das ganze Transitional aus
[Blockierte Grafik: http://www.msmaster.de/transitional.gif]

Und so sieht das ganze aus, soabld ich Strict benutze
[Blockierte Grafik: http://www.msmaster.de/strict.gif]

Und zu der sache mit den Validatoren : Wozu gibt es dann welche vom W3C, wenn diese dann doch nichts taugen sollen :roll:

MS Master

Achja, auf den Bildern nicht zu sehen, aber bei Strict macht FF dann auch ganz am ende der Table nochmals eine dünne, ca. 1-2 Pixel dicke graue linie nach dem schatten.

bugcatcher

Zitat von MS Master

Und zu der sache mit den Validatoren : Wozu gibt es dann welche vom W3C, wenn diese dann doch nichts taugen sollen :roll:

Weil kein Bot der Welt intelligent ist. Der kann nur prüfen ob Befehle richtig geschrieben sind. Das was sie in Kombination bewirken, kann er kaum analysieren. Der Bot weiss nur, dass "border-color:15px;" richtig geschrieben ist, nicht ob das in kombination mit anderen Dingen Fehler produzieren kann.

Sagt Dir "BoxModel" was? Ich kann dir was tolles valides bauen, was vom Validator als richtig anerkannt und vom ie auch nach aussen hin richtig dargestellt wird, wärend es beim Firefox explodiert... und dennoch macht der IE es falsch, denn die logik im code stimmt nicht.

Nur weil der Validator sagt "code ist ok", heisst das nicht, dass das was du geschrieben hast, das ist was der IE anzeigt.

http://www.howtocreate.co.uk/wrongWithIE/

Natürlich kann das auch ein MozillaBug sein. Gecko ist auch nicht fehlerhaft. Aber um das brauchbar zu analysieren baucht man a) den kompletten Quelltext und b) am besten auch mal eine Testseite.

MS Master

So, erstmal die Links

Transitional

Strict

Dann noch was zu deiner Aussage, das nur die schreibweise, aber nicht die zusammenhängende Syntax geprüft werden würde.

Diese Aussage ist definitiv falsch !!!

Beispiel : width="100%" ist ein 100% richtig geschriebener , aber nur teilweise zulässiger TAG. Eine table TAG darf das je nach HTML/XHTML Version nämlich noch enthalten, aber keinesfalls ein TR/TD TAG.

Um das unterscheiden zu können, muss der Validator das aber sehr wohl genauer prüfen, und nicht nur eine simple "Rechtschreibprüfung" durchführen. Von daher evt. erst nochmals die Specs lesen, bevor du das einfach so behauptest.

Dr. Evil

width="100%" ist für table erlaubt, für die anderen nicht und genau das wird überprüft, nicht aber, ob 100% überhaupt Sinn machen (bei 0% fraglich)

MS Master

Zitat von Dr. Evil

width="100%" ist für table erlaubt, für die anderen nicht und genau das wird überprüft, nicht aber, ob 100% überhaupt Sinn machen (bei 0% fraglich)

Da gebe ich dir durchaus recht.

Das gibt dann aber immer noch keine erklärung ab, wieso einfachster, wenige Zeilen großer Code, der 100% keine unstimmigkeit hat, im einen Modus fehlerfrei, im anderen aber "fehlerhaft" dargestellt wird.

Also noch simpleren XHTML Code kann man fast nicht mehr schreiben für einen kompletten grafischen table.

Habe jetzt mal noch verschiedene Opera, IE und Konqueror Versionen (soweit hier gerade zur hand) probiert, alle kein problem, nur der FF zeigt im Strict Modus plötzlich oben diese "Geisterlinie". Von daher muss ich davon ausgehen, das eher der FF ein Problem hat, und nicht der Code.

Das der IE "Fehler" Ignoriert, mag sein, aber das 6 verschiedene Opera, und 3 Konqueror Versionen alle den selben "fehler" haben sollen, das kann man erzählen wem man will.....

Der FF macht offensichtlich einen Fehler im Strict Modus.

bugcatcher

Zitat von MS Master

Dann noch was zu deiner Aussage, das nur die schreibweise, aber nicht die zusammenhängende Syntax geprüft werden würde.
Diese Aussage ist definitiv falsch !!!

Du hast nur simpel nicht verstanden, wass ich Dir versucht hab zu erklären.

Darum das BoxModel-Beispiel.
Ich kann einen table standardkonform bauen und er sieht auf IE aus, wie ich mir das ergebnis vorstelle. aber wenn IE das einzeigt, was ich haben will, dann ist der code falsch. von der logik her.

bei strikt gelten teilweise andere bedingungen als bei tradidional oder gar quirks. daher sind unterschiedliche ansichten schon möglich und nicht zwangsweise ein fehler vom firefox. ; )

opera 8 und konqueror 3.3 machen den abstand übrigens auch. wenn vorversionen das nicht gemacht haben, dann war das wohl eher ein bug. insofern würde ich den neuen versionen eher glauben als den alten oder dem IE. der ist eh seit über 3 jahren nicht mehr weiterentwickelt worden.

es liegt an den grafiken. allerdings nuss ich passen, warum das so ist.

in xthml strict benutze ich nie tabellen fürs design. daher ist mir so ein problem noch nicht unter gekommen.... muss ich erstmal mit rumspielen.

MS Master

Was benutzt du dann wenn keine Tabelle ?

Da ich den Inhalt dynamisch mit PHP fülle, war das 3x3 grundgerüst einer Tabelle bisher immer gut zu gebrauchen, um dort den gewünschten Code zur laufzeit in die entsprechende Zelle einzufügen.

bugcatcher

Ich benutze Tabelle für Tabellen, aber nicht fürs Design. Schonmal was von tabellenfreiem Design gehört? ; )

MS Master

Da du auf deiner Page selber nur viele viele ineinander verschachtelte Tabellen benutzt, hast du wohl selber noch nie von Tabellenfreiem Design gehört :wink:

bugcatcher

Die Seite ist 3 jahre alt und ist wegen des fehlenden Inhaltes auch nicht wirklich als Seite zu bezeichnen. Funktioniert nichtmal mit Opera brauchbar.

Kannst ja hier mal Tabellen suchen: http://www.weg-verwaltungen.com

fender

Ich habe mir das mal näher angeguckt. Es gibt irgendeinen Konflikt bei der Höhe der ersten Zeile. Hab mal einiges geändert, kann dir das neue Script gerne zuschicken (PM, wenn gewünscht). Der eine Fehler des neuen Balkens lässt sich durch die Angabe in der CSS-Datei:

Code

.main_balken_oben {
	background-image: url(balken_oben.gif);
	background-repeat: repeat-x;
}


.main_balken_unten {
	background-image: url(balken_unten.gif);
	background-repeat: repeat-x;
}


.main_balken_links {
	background-image: url(balken_links.gif);
	background-repeat: repeat-y;
}


.main_balken_rechts {
	background-image: url(balken_rechts.gif);
	background-repeat: repeat-y;
}

Alles anzeigen

verhindern, denn es ist nur die Wiederholung des Strichs der oberen Mitte.
Übrig bleibt aber dennoch ein kleiner weißer Streifen zwischen der 1. und 2. Zeile. Der Internet Explorer zeigt die Seite jedoch korrekt an... :?

Bin noch nicht ganz zufrieden, aber vielleicht findet ja jemand noch den Rest.

bugcatcher

Es liegt faktisch an den Grafiken. Die nehmen mehr platz ein, als sie sollte und haben unten einen Abstand. Aber gut das ihr mich dran erinnert. Mich interessiert das problem schliesslich auch....

fender

Hier mal noch der Link zum "aktuellen Stand".

caveman

Der DOCTYPE hat deshalb Einfluß, weil moderne Browser das sog. DOCTYPE-Switching beherschen. Je nach angegebenem DOCTYPE rendern sie die Seite entweder im Standards Compliance Mode oder im Quirks Mode.

Besonders beim IE5 und IE 5.5 sehen die Seiten manchmal deutlich anders aus als im jeweils anderen Modus.
Hinsichtlich Cross-Browser-Coding von Seiten bist Du daher am besten bedient, wenn Du die Seite in XHTML erstellst (z.B. 1.0 Transitional) und dies entsprechend beim W3C validierst. Kommen die Seiten da durch, werden sie im Standards Compliance Mode angezeigt.

Prüfen kannst Du das im FF über Tools - Page Info. Dort ist auch der "Render Mode" aufgeführt.

fender

Danke Caveman, ich glaub das wissen wir alle. Bei der konkreten Seite, um die es hier geht, wird aber auch der Standard Compliance Mode angezeigt. Trotzdem tritt der Fehler auf, den wir uns bisher nicht erklären können!

caveman

Sorry, war mir nicht ersichtlich.

Ohne jetzt das Strict/Transitional-Problem aufklären zu können:
Alternativ eine tabellenfreie Lösung zu stricken wurde ja schon angesprochen. Eine elegante und funktionierende, reine CSS-Lösung findest Du hier:
http://www.vertexwerks.com/tests/sidebox/

Edit: Ein noch viel netteres und unkomplizierteres Beispiel kann man hierbetrachten. Vorteil: Man benötigt nur zwei Grafiken, eine für die Box und eine für die Seiten.

MS Master

Hi all,

danke erst mal für die Tips.

caveman

habe das jetzt mit Divs gelöst, so wie es wohl allgemein eher erwünscht ist :wink:

fender

Habe das Problem jetzt anders gelöst, indem ich kein 3x3er Kasten, sondern nur noch 3x1 benutze, also je eine Zeile für Oben, Mitte und Unten. Habe es online gestellt, damit du dir genau ansehen kannst, wie ich das jetzt gelöst habe.

@All

habe mich mal ein wenig schlau gemacht, und den Grund für den "Fehler" gefunden.

Im Transitional Modus gehen meine Grafiken konplett über die ganze Zelle in der Höhe, und die Schrift wird auf einer s.g. Baseline angeordnet, also einige Pixel vom unteren Rand entfernt, um auch z.b. den "bogen" bei eine kleinen "g" etc. richtig darstellen zu können (dieser befindet sich ja ein kleines bisschen unterhalb der "Baseline"). Diese Baseline ist einfach vorgegeben, was ja aber in der regel kein problem ist.

Im s.g. Strict Modus, kommt nun aber als änderung hinzu, das Grafiken ab jetzt ebenfalls an der Baseline ausgerichtet werden. Da ich rechts und links normale "vordergrund" grafiken benutzt habe, in der mitte den Balken aber als backround grafik, kommt es zu dem effekt, das die Grafiken sich "verschieben". Den "vordergund" grafiken werden jetzt ja an der Text Baseline ausgerichtet, "hintergrund" grafiken hingegen (noch) nicht.

Immerhin hat man jetzt was zum Strict modus und seinen änderungen gelernt :wink: