[+HTML]

[Arne R]

Hallo,

Ich würde gerne Eure Meinung in Bezug auf HTML / Browserkompatibilität der folgenden Seite hören. Insbesondere wäre es nett wenn sich jmd. die Seite mal mit einem MSIE 5 auf Mac angucken könnte. Da gibt es wohl Probleme, ich kann diese hier aber nicht rekonstruieren.

http://www.owl-nachhaltig-gestalten.de/index.php

Vielen Dank,

Arne.

[Cheatah]

Hi,

Ich würde gerne Eure Meinung in Bezug auf HTML / Browserkompatibilität der folgenden Seite hören.

es ist defekt, unsemantisch und in vielerlei Hinsicht unsinnig. Dein Code ist also nicht kompatibel zu HTML.

Insbesondere wäre es nett wenn sich jmd. die Seite mal mit einem MSIE 5 auf Mac angucken könnte.

Warum?

Cheatah

[Arne]

Hallo,

es ist defekt, unsemantisch und in vielerlei Hinsicht unsinnig. Dein Code ist also nicht kompatibel zu HTML.

Defekt ist, zumindest auf der Index.php behoben. Inwieweit unsemantisch und wie macht unsinniger Kode inkompatible zu html?

Insbesondere wäre es nett wenn sich jmd. die Seite mal mit einem MSIE 5 auf Mac angucken könnte.

Da ich gehört habe, dass die Divs verschoben werden und ich dies hier nicht testen kann.

Danke für deinen Kommentar,

Arne.

[Cheatah]

Hi,

Inwieweit unsemantisch und wie macht unsinniger Kode inkompatible zu html?

haufenweise <div>s ohne Not, Tabellen ohne tabellarische Daten, Massen von IDs und Klassen mit reichlich aussagefreien Namen, die teilweise sogar auf die derzeit gewünschte Darstellung schließen lassen, leere Elemente, die einen Inhalt brauchen, "&nbsp;" und "<br>" in rauhen Mengen, ohne dass dieser Inhalt(!) benötigt würde, HTML-Attribute zur Vermittlung von Darstellungsempfehlungen usw.

Kurz: Der HTML-Code wurde geschrieben, während Du bereits an die Darstellung gedacht hast. Das ist, wenn man nicht schon _sehr_ erfahren ist, der vermutlich größte Fehler, den man begehen kann.

Übrigens ist der HTML-Code noch immer defekt, auch wenn es der Validator nicht sagt (bzw. merken kann). Wenn Du auf einen Browser triffst, der HTML ebenso streng betrachtet wie der Validator, wirst Du bei den "<br/>" eine Überraschung erleben. Du lebst gerade von der Fehlerkorrektur der Browser.

Cheatah

[rob]

Hi!

Da ich gehört habe, dass die Divs verschoben werden und ich dies hier nicht testen kann.

Ja, und das ist noch immer der Fall, wie ich gerade gesehen hab. Da hat sich durch deine HTML-Korrekturen also nichts dran geändert.

Gruß, rob

[Robert Bienert]

Moin!

Ich würde gerne Eure Meinung in Bezug auf HTML / Browserkompatibilität der folgenden Seite hören. Insbesondere wäre es nett wenn sich jmd. die Seite mal mit einem MSIE 5 auf Mac angucken könnte. Da gibt es wohl Probleme, ich kann diese hier aber nicht rekonstruieren.

Nun, mal schauen (obwohl ich nur den IE 5.2.3 anbieten kann)

http://www.owl-nachhaltig-gestalten.de/index.php

Dies sind alles Mac-Browser:

Camino 0.8.4 (Mozilla 1.7.8): Sieht gut aus, passt alles.

Internet Explorer 5.2.3: Der eigentliche Inhalt der Seite, also der weiß hinterlegte Teil befindet sich rechts neben Seitenkopf und -fuß. Benutzt du solche CSS-„Anweisungen“ wie float oder position? Ein Blick in den HTML-Code offenbart außerdem eine ganze Armada von ineinander geschachtelten Tabellen. Muss das sein?

Safari 1.3.1: wie Camino

Firefox 1.5 Beta 1: dito

P.S.: Leider konnte ich erst beim Lesen des Impressums, dessen Verlinkung du noch optimieren solltest, erfahren, was OWL bedeutet.

Viele Grüße,
Robert

[Arne]

Hallo Robert,

Internet Explorer 5.2.3: Der eigentliche Inhalt der Seite, also der weiß hinterlegte Teil befindet sich rechts neben Seitenkopf und -fuß. Benutzt du solche CSS-„Anweisungen“ wie float oder position?

float left, right und clear um Divs zu anzuordnen. Auf Position habe ich extra verzichtet. Womit kann der 5.x da ein Problem haben.

Ein Blick in den HTML-Code offenbart außerdem eine ganze Armada von ineinander geschachtelten Tabellen. Muss das sein?

Wenn noch mehr Tabellen da wären hätt ich zumindest die Probleme mit dem IE5.x nicht. :-/ Ich habe zuerst die News und die Projekte etc. ohne Tabellen ausgegeben. Leider haben sich die alternativ zu den Tabellen eingesetzten Divs je nach Browser extrem unterschiedlich verhalten - da hab ich die Tabellen wieder eingesetzt.

Danke,

Arne

[Robert Bienert]

Moin!

Internet Explorer 5.2.3: Der eigentliche Inhalt der Seite, also der weiß hinterlegte Teil befindet sich rechts neben Seitenkopf und -fuß. Benutzt du solche CSS-„Anweisungen“ wie float oder position?

float left, right und clear um Divs zu anzuordnen. Auf Position habe ich extra verzichtet. Womit kann der 5.x da ein Problem haben.

Keine Ahnung, aber jemand anderes hat dazu schon einen Tipp abgegeben. Du musst wissen, dass der 5.2.3 der letzte IE für den Mac sein wird und schon etwas in die Jahre gekommen ist.

Ein Blick in den HTML-Code offenbart außerdem eine ganze Armada von ineinander geschachtelten Tabellen. Muss das sein?

Wenn noch mehr Tabellen da wären hätt ich zumindest die Probleme mit dem IE5.x nicht. :-/ Ich habe zuerst die News und die Projekte etc. ohne Tabellen ausgegeben. Leider haben sich die alternativ zu den Tabellen eingesetzten Divs je nach Browser extrem unterschiedlich verhalten - da hab ich die Tabellen wieder eingesetzt.

Das kommt nur darauf an, wie man CSS einsetzt. Mein Vorschlag für ein vergleichbares Design, das ohne Tabellen auskommt und trotzdem mit sämtlichen Browsern funktionieren dürfte lautet: Kopf, Inhalt und Fuß werden ganz normal untereinander gepackt. Die einzelnen Einträge, z.B. für die „Neuigkeiten“ bestehen aus einer Überschrift, Datum, einem kurzen Aufmacher mit Bild und einem Link zum kompletten Artikel. Auch diese ganzen Einträge kannst du m.E. untereinander schreiben, wobei das Bild einfach rechts _innerhalb_ des Aufmachers ausgerichtet wird. Meinetwegen kann das Bild auch in einen eigenen Block, an dem der Aufmacher „vorbeifließt“ (float)

Das Projekt des Monats kannst du da rechts an der Seite absolut positionieren, damit hat selbst ein IE keine Probleme (aber vielleicht Lynx ;-) )

Viele Grüße,
Robert

[rob]

Hi!

Eigentlich wollte ich schnell mal einen Screenshot machen und dir zeigen.
Aber das ist wohl nicht nötig... Cheatah hat dich ja bereits drauf hingewiesen, wo das Problem liegt.
Wenn du deinen Code korrigiert hast, sag mal bescheid. Dann schau ich gerne noch mal, ob's dann hin haut...
Eventuell muß man beim Mac/IE dann tatsächlich noch ein wenig tricksen...
Aber eigentlich hält sich das Teil sogar mehr an Standards als sein Windows-Kollege...

Gruß, rob

[Cyx23]

Hallo Arne.

... Da gibt es wohl Probleme, ich kann diese hier aber nicht rekonstruieren.

Das Div "pageContent" rutscht nach rechts neben den Header, vielleicht durch
#headerGfx02{float: left; welches nicht hinreichend auf ein clear:left reagiert.

Grüsse

Cyx23

[Siechfred]

Tag Arne.

Ich würde gerne Eure Meinung in Bezug auf HTML / Browserkompatibilität der folgenden Seite hören.

Zur Browserkompatibilität hätte ich folgendes anzumerken. In den modernen Browsern (IE 6, FF 1.0.7 und Opera 8.5, alle unter Win2k Pro) sieht es so aus, wie es wohl soll. Probleme gibt es in IE 5.01 & 5.5 (Screenshot, 146kB) und in Amaya 9.2.2 (Screenshot, 156kB). Mehr stehen mir momentan nicht zum Testen zur Verfügung.

Zum HTML sagt der Validator, dass du bei einigen Bildern keinen ALT-Text angegeben hast, was bei Textbrowsern zu unschönen Ergebnissen führen kann. Der Header besteht aus einer ziemlich gehaltvollen DIV-Suppe, warum gruppierst du die Grafiken und wendest die CSS-Formatierungen nicht direkt auf die Grafiken an? Dein Inhalt ist exakt 860px breit, was bei Schriftvergrößerung zu unschönen Effekten führt. Im CSS gibt es einen Tippfehler und ein paar Warnungen, denen du nachgehen solltest (siehe CSS-Validierung). Und nicht zuletzt, warum zentrierst du den Content nicht horizontal? Das sähe m.E. gefälliger aus.

Ach, eines noch, als Eingangsseite für das Projekt fehlt mir ein Hinweis darauf, was die Seite eigentlich soll. Nicht jeder weiß, was "OWL" bedeutet.

Siechfred

[Arne]

Hallo Siechfred,

Zur Browserkompatibilität hätte ich folgendes anzumerken. In den modernen Browsern (IE 6, FF 1.0.7 und Opera 8.5, alle unter Win2k Pro) sieht es so aus, wie es wohl soll.

Schon mal gut.

Zum HTML sagt der Validator, dass du bei einigen Bildern keinen ALT-Text angegeben hast,

ist in Arbeit

Dein Inhalt ist exakt 860px breit, was bei Schriftvergrößerung zu unschönen Effekten führt.

Wird die Schrift, nicht bei Größenveränderung anders gebrochen, so dass sie in dem 860px breiten Kasten die gleiche Breite aber mehr Höhe einnimmt?

Ach, eines noch, als Eingangsseite für das Projekt fehlt mir ein Hinweis darauf, was die Seite eigentlich soll. Nicht jeder weiß, was "OWL" bedeutet.

Ostwestfalen-Lippe, aber du hast natürlich Recht. Danke für die Screenshots und das Post.

Arne.

[Candid Dauth]

Heißa, Siechfred,

Probleme gibt es in IE 5.01 & 5.5 (Screenshot, 146kB)

Was genau wird jetzt dort falsch angezeigt? Ich kann in deinem Screenshot keinerlei Unterschied zur Darstellung in meinem Firefox feststellen.

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

[Siechfred]

Tag Candid.

Probleme gibt es in IE 5.01 & 5.5 (Screenshot, 146kB)
Was genau wird jetzt dort falsch angezeigt?

Schau dir den blauen Balken zwischen dem "Nora"-Logo und den Headergrafiken, ebenso das blaue Rechteck rechts unter der Headergrafik an. Weiterhin vergleiche mal die Schriftgröße der Nachrichtentexte im Screenshot und im Firefox. Sind zwar alles nur Kleinigkeiten, aber der OP hatte danach gefragt :-)

Ich kann in deinem Screenshot keinerlei Unterschied zur Darstellung in meinem Firefox feststellen.

Ich schon.

Siechfred

[Candid Dauth]

Heißa, Siechfred,

Schau dir den blauen Balken zwischen dem "Nora"-Logo und den Headergrafiken, ebenso das blaue Rechteck rechts unter der Headergrafik an.

Ahja, naja, aber da schaut ja eh keiner hin. ;-)

Weiterhin vergleiche mal die Schriftgröße der Nachrichtentexte im Screenshot und im Firefox.

Bei mir existiert dort kein Unterschied.

Gautera!
Grüße aus Biberach Riss,
Candid Dauth