Hi,

ich erstelle eine Clanpage und möchte dieses Projekt für alle Browser erstellen. Die Seite findet ihr unter http://www.ubz-clan.de/wc3 .
Unter Linux funktioniert es mit dem KDE Browser. Nur mit dem Mozilla der bei Knoppix 3.4 dabei war, sehen die Bilderpositionierungen schrecklich aus.
Auch habe ich mittels getimagesize() von php mal alle Bilder mit width und height Angaben positioniern gelassen. Ohne jeglichen Erfolg.
Laut Opera Usern sieht es gut aus. Mit dem IE ebenso.

Nur der Mozilla macht mir Probleme. Auch ist die Seite xhtml 1.1 konform sowie das minimal css.

Wie gesagt, ausser Mozilla stellen es andere Browser korrekt dar.
Ich hoffe, ihr habt eine Idee.

uah. bei dem code sträuben mir sich ehrlich gesagt die nackenhaare. du benutzt hier xhtml 1.1 (welches man eh noch nicht benutzen sollte) und nimmst DANN noch Tabellen zum Layouten.

Du solltest mal deinen Code statt mit Tabellen mit divs und definitionslisten/listen bauen. Ausserdem benutzt du inline css. Auch das ist nicht gut. Solltest du alles auslagern. Eher würde ich garnicht weiter an der Seite rumfriemeln.

Interessante Antwort. Ich dachte immer divs wären hacks die man nicht nehmen sollte.
Da Tabellen eigentlich eindeutig sein sollten.
Inline CSS sollte jeder Browser doch beherrschen... Aber werde ich auslagern.

Die Seite ist komplett in PHP gebunden. Das heisst, da kann ich alle diese Änderungen ohne weiteres ergänzen.

Warum soll man XHTML 1.1 nicht nutzen ? Der checker fühlte sich bei dem Code ganz wohl.

Ansonsten danke für die Antwort. Werde ich mal testen.

so lala... das Problem wird mit <div> auch nicht behoben.

Das Problem ist, das der Mozilla 2 Grafiken untereinander eben nicht lückenlos darstellen will.
http://www.ubz-clan.de/main/index.php
dort kann es auch bestens sehen.

Ob Tabelle oder div, das Problem ist das gleiche.

Wenn ich die Textzeichenhöhe auf 1% skaliere, ist es fast weg.

Jetzt habe ich was gefunden, was sich perfekt zu dem Thema bezieht.

http://www.dodabo.de/html+css/img-table/

Deswegen rätst du mir auch lieber divs zu benutzen
Nichts desto trotz

td img {display: block;}
hat zu 80% aller Probleme gelöst

Jetzt habe ich alles geuppt, und siehe da, es ist nun lückenlos.
http://www.ubz-clan.de/wc3/

Das Problem ist, das Mozilla keine Probleme hat, da er es 100% korrekt macht.
Man muss halt nur wissen, wieso er das so macht.

Wie gesagt, div allein ist nicht die Lösung. Es liegt wie im Link da oben beschrieben an der Verarbeitung der Daten.
Ob man mit Tables oder mit divs das Layout gestaltet, ist jedem selber überlassen.
Wenn man mit vielen Grafiken zu tun hat, die nahtlos aneinandergereiht werden müssen, sollte man beides kombinieren. Allein deswegen, um Fehler mit border="1" schneller zu finden, die womöglich der Grafiker getan hat.

Zu viele verschachtelte Tabellen sind auch nicht so gut, da nicht jeder Browser mit der Skalierung der unteren Ebenen der Tabellen dann klar kommt.

Hallo SunAngel,

da Du hier schon im Barrierefrei-Teil des Forums postest und nochmal zur kurzen Erläuterung (länger lesen mußt Du dann selber - solltest genug Stoff im Forum finden und massenhaft Links):

- Tabellen werden zwar von allen Browsern prima beherrscht, waren aber eigentlich immer nur dazu da, tabellarische Daten anzuzeigen. Da man aber in den 90iger Jahren aufgrund der mangelnden CSS-Unterstützung der damaligen Browser nix besseres zum Layouten hatte, wurden Tabellen eben dazu mißbraucht. Das hat sich dann leider so eingebürgert und das Umdenken findet nur langsam statt.

- Nachteile von Layouttabellen: Wenn Bilder in den Zellen stecken, dann werden die z.B. von Screenreadern auch vorgelesen: Grafik - Grafik - Grafik... müssen sich Blinde dann anhören- bei Dir noch mit sämtlichen alt-Texten wie banner_animation, banner_unten etc. Sie werden auch streng von links nach rechts gelesen (halt immer dem Quelltext nach) - das macht bei tabellarischen Daten auch Sinn. Bei mehrfach verschachtelten Tabellen kommt dann aber meistens Unsinn dabei raus.
Ein ähnliches Problem gibt es mit kleinen Handhelds. Und die werden ja vermutlich auch in Zukunft noch mehr. (Wenn Du Opera hast, schau Dir mal Deine Seite an und klicke STRG + F11 - den Bildschirm dann zusammenschieben - dann hast Du eine gute Handheld-Simulation). Außerdem gibt es oft Probleme beim Drucken, weil dann nicht die ganze Seite draufpaßt - bei Dir übrigens auch nicht.

- Wenn man nur CSS zum Layouten benutzt, dann kann man diese Nachteile umgehen, und die Seite so besser zugänglich für alle machen (Extra CSS für Handhelds und zum Drucken z.B.). Das muß man natürlich auch können und so einfach ist das auch nicht.
Divs sind kein Hack - <div> ist einfach nur ein Blockelement ohne eigene semantische Bedeutung. Damit ist es sehr vielseitig einzusetzen und wird dann in der Praxis oft zuviel und unsinnig eingesetzt. Aber ein paar der <div>s wird man halt immer brauchen zum Layouten. Als Grundsatz gilt aber: weniger ist mehr! Besser ist es, sowieso vorhandene HTML-Elemente per CSS anzusprechen und nicht für jedes bischen zusätzliche <div>s und <span>s mit tausend Klassen zu verbrauchen.

Und gerade für XHTML gilt die strenge Trennung von Inhalt und Layout - die gilt auch schon für HTML 4.01, vor allem in der strict-Variante, aber noch mehr für XHTML. Meiner Meinung nach haben Tabellenlayouts in XHTML nix verloren. Tabellen sind natürlich noch erlaubt, aber eben nur für "echte Tabellen" mit tabellarische Daten. Der Validator ist aber leider eine Maschine und kann das nicht unterscheiden. Solange die formalen syntaktischen Vorraussetzungen gegeben sind, wird der nicht meckern.

XHTML ist nun aber nicht gleichbedeutend mit barrierefrei! Das sind zwei paar Schuhe. Ebenso wie CSS und barrierefrei ebenfalls zwei paar Schuhe sind - es gibt massig CSS-basierte Seiten, die kein Stück barrierefrei sind.

Und zum Thema XHTML 1.1 gibt es lange und ausführliche Diskussionen im Forum: http://www.xhtmlforum.de/viewtopic.p...er=asc&start=0
http://www.xhtmlforum.de/viewtopic.php?t=1876

Zumindest lieferst Du mir Dein XHTML1.1 einfach als HTML (text/html) aus, obwohl mein Firefox auch richtiges XHTML mit richtigem MIME-Typen verstehen würde und man XHTML1.1 nach den Bestimmungen nicht als text/html ausliefern sollte: http://web-sniffer.net/?url=http%3A%...ww.ubz-clan.de

Nunja, Barrierefeiheit dachte ich in erster Linie, dass alle Browser damit zurecht kommen.
Es ist eine 95% Grafikseite für die WC3 Spielergemeinschaft.

Die vorher gestalteten Seiten waren nur IE Usern richtig vorbehalten.
Diesmal wollte ich jeden möglichen Browser unterstützen.

Bei div ist ja das Problem, dass man sehr viele Klassen definieren muss, da der Browser jede Grafik anders platzieren muss. Deswegen fand ich Tabellen besser geeignet.

Da die Seite für Computerspieler bestimmt ist, wird das Thema Screenreader nicht von Bedeutung sein. WIrd aber in künftigen Projekten berücksichtigt.

Desweiteren ist es nicht ganz so einfach, an zuverlässlichen Quellen zu kommen, wie man was richtig gestalten soll. Bücher sind meist zu schnell veraltet. ( Dieses bevorzugt Tabellen fürs Layout )

Ich bin Froh, dass ich hier so ein kompetentes Forum gefunden habe.
Entschuldigt bitte, wenn dieses Thema im falschen Bereich angelegt worden ist.

Danke für alles

terrikay hat vollkommen Recht.
brandneue xhtml spezifikationen und rostige tabellen layouts sind uhm... unpassend.
ich würd fast sagen du versteckst das böse in unschuldigen tabellen ;0

unabhängig davon tut das layout in meiner 1600er Auflösung etwas zerfallen.
vorwiegend die rechten Tabellen die sich mehr an den rechten Rand klemmen als links an das Layout

Da gebe ich dir Recht.

Bis auf dieses Forum hier, habe ich bisher nur hier und da ein paar Infos zusammen bringen können. Ich wollte den neuesten Stand der Dinge verwirklichen. Da man leider (ausser hier) kaum Kompetenz findet, ist die HP so unglücklich gelaufen.

Ich bin echt froh, dieses Forum mit den kompeteten Usern nutzen zu dürfen.
Die Grafiken wurde für die 1024x768 festgelegt. Habe es bisher noch nicht mit größeren Auflösungen getestet.

Aber ich glaube, Grafiken zu skalieren macht wenig sinn oder ?
Da die meist dann die Schärfe verlieren.

Auch den DOCTYPE habe ich aus dem Netz 1:1 übernommen gehabt.
Ich wusste gar nicht, dass es soviele gravierende Unterschiede gibt.