XHTMLforum - Viele Probleme mit der Darstellung bei Mozilla und Opera.

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Viele Probleme mit der Darstellung bei Mozilla und Opera. (http://xhtmlforum.de/showthread.php?t=32917)

Viele Probleme mit der Darstellung bei Mozilla und Opera.

Hallo.
Ich habe ein großes Problem:

Und zwar hab ich ein Design entworfen und es auch gestaltet, unter der ständigen Verwendung des IE. Als dann die Startseite fertig war, hab ich mir die anderen "großen" Browser downgeloaden, zum provisorischen Test. Volles Entsetzem sah ich das Ergebniss:

Unter Mozilla sowie Opera wird die Startseite nicht mittig dargestellt und der erste Abschnitt (guten Tag! usw.) ist ganz am Rand, obwohl es eigentlich wie die iframe, glaub 38 px weit entfernt sein sollte.

Dazu kommt noch das unter Opera auch noch die "Newz" wie eine Schlange dargestellt wird und unter Mozilla die Newz sich ganz ausbreiten und sich nicht an Grenze halten ( iframe { POSITION: relative; LEFT: 38px; WIDTH: 650px; HEIGHT: 400px; }).

Ich möchte mir nicht Netscape downlaoden, weil der extrem schlecht bewertet wird, also falls den jemand hat, kann er, sofern er will, seinen Bericht über die Lage schreiben, wäre dankbar drüber.

Auch sonstige Anregung, auch auf das Design bezogen, nur zu....

Ich wusste nicht ob ich den Code jetzt hier rein posten soll; ich habs mal gelassen, da ja jeder selber gucken kann.

So nun aber das wichtigste: www.dimension-three.de/test.php

Also vorerst wird dir hier niemand richtig weiterhelfen können, weil dein Code grauenhaft kaputt ist. Bitte sorge zunächst mal für valides HTML und ebensolches CSS, damit wir wenigstens eine Basis haben, auf der sich weiterarbeiten läßt.

Ein paar Hinweise querbeet:
• »text-align« ist eine Eigenschaft, mit der man Inlineblöcke ausrichtet, keine Block-Elemente.
• SPAN ist ein Inline-Element, es darf daher keine Block-Elemente und keine Tabellen enthalten.
• Der Wert des Attributes ID darf innerhalb eines Dokumentes nie wiederholt werden; »id="menu"« kann also nur einmal vorkommen.
• IFRAMES sollten immer eine Alternative enthalten, weil sie oft abgeschaltet werden (manuell oder durch Werbeblocker). Setze also einen Link auf die im IFRAME referenzierte Datei oder verabschiede dich gleich davon. Deine Leser haben nur Nachteile davon, aber keinen einzigen Vorteil.
• In ISO-8859-1 brauchst du »ä, ö, ü« und »ß« nicht zu maskieren. Du kannst sie einfach so hinschreiben.
• Scrollbars einfärben war schon 1998 out, heute ist es nur noch peinlich. Ungültig ist es sowieso, also weg damit.
• Schriftgrößen gibt man nicht in »px« an; das ist extrem unfreundlich. Nimm Prozente und »em« und respektiere die Wahl deiner Leser für diese Werte, zu deutsch: Mach die Schrift nur dann kleiner, wenn der Text wirklich unwichtig ist.
• Wenn du eine Hintergrundfarbe setzt, dann schreib auch die Vordergrundfarbe dazu (und umgekehrt), sonst sehen deine Leser eventuell Weiß auf Weiß also gar nichts.
• Links müssen immer gut erkennbar sein; setze sie niemals in der Farbe des Textes, bevormunde deine Leser nicht in der Frage der Unterstreichung und kennzeichne um Himmels Willy besuchte Links ordentlich.
• »darkgray« ist keine gültige Farbangabe.
• Entwickle nie im IE Win zuerst; der kann HTML und CSS allenfalls rudimentär und interpretiert das Wenige, was er erkennt meistens auch noch falsch. Nimm Opera oder Mozilla, dann hast du deutlich weniger Nacharbeit. Code läßt sich leichter ab- als aufrüsten.

Es gäbe noch viel, viel mehr zu sagen — aber schreib erstmal ein ordentliches Grundgerüst in sauberem HTML und CSS, dann sehen wir weiter.

Und verlier die Lust nicht. :)

Gruß
Thomas

Jetzt hab ich mich so angestrengt und nun ist erst alles "kaputt" :D .

Also erstmal möchte ich dir danken, dass du nicht nur schreibst, dass alles scheisse ist, aber keine Verbesserungsmöglichkeiten zeigst.

Ich werde deine Verbesserungsmöglichkeiten so gut wie möglich implizieren versuchen. Doch mit ein paar Sachen bin ich nicht recht einverstanden:

Zuersteinmal zu den Scrollbars. Ich finde es schön und an der "usability" tut es auch nicht kratzen, zwar sehen es Opera und Mozilla-User nicht, aber das ist ja kein Grund es den IE-Usern vorzuenthalten und was "out" ist, ist mir egal.

Dann hätte ich noch eine Frage zu den iframes, denn ehrlichgesagt mag ich sie auch nicht, seh aber keine andere Möglichkeit, meine Newz einzubinden. Denn mit <? include ?> gibt es furchtbare Fehler und ich habe zwar versucht diese Fehler auszubügeln, doch das will mir nicht glücken. Also muss ich sie nehmen. :cry:

Ach und was ich noch vergessen habe:

Wie krieg ich das ganze, also zwischen <table> und </table> mittig hin? Ich habe mal bei css4you.de unter Positionierung nachgeschaut aber nichts gefunden was <div align="center"> ähnelt, also mit dem LEFT und RIGHT ist es doch blöd, weil es nicht relativ ist, gibt es denn kein Tag, der das ganze immer mittig hält?

Zitat:

Zitat von weeh

Zuersteinmal zu den Scrollbars. Ich finde es schön und an der "usability" tut es auch nicht kratzen

Scrollbars sind Teil des Betriebsystems, nicht der Webseite. Deine Leser kennen »ihre« Scrollbars aus all ihren Programmen; sie wissen genau, wie sie aussehen. Wenn du daran herumspielst, baust du ohne Not eine verzögerte Wiedererkennung ein und eventuell sogar echte Hürden für die Leute, die vielleicht Farbsehschwächen und sich ihre Scrollbars entsprechend eingestellt haben.

Zitat:

Dann hätte ich noch eine Frage zu den iframes, denn ehrlichgesagt mag ich sie auch nicht, seh aber keine andere Möglichkeit, meine Newz einzubinden. Denn mit <? include ?> gibt es furchtbare Fehler und ich habe zwar versucht diese Fehler auszubügeln, doch das will mir nicht glücken. Also muss ich sie nehmen.

»Also«? Also mußt du lernen, wie es richtig geht. Andere haben es doch auch hinbekommen.

Eigentlich ist es auch nicht soo schwer. Beispiel:

Code:

<?php

include($_SERVER['DOCUMENT_ROOT'].'/news.php');

?>

Was für Fehlermeldungen bekommst du denn da? Meistens gibt es Probleme mit dem Pfad; eventuell endet $_SERVER['DOCUMENT_ROOT'] bei dir mit dem »/«, dann mußt du den vor dem »news.php« weglassen.

Zitat:

Wie krieg ich das ganze, also zwischen <table> und </table> mittig hin?

Noch ein Beispiel:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="de">

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Horizontal zentriert</title>

<style type="text/css">

body

{

        /* Das braucht der IE Win. */

        text-align:        center;

}

body *

{

        /* Für die Nachfahren heben wir das wieder auf. */

        text-align:        left;

}

table

{

        border:                5px solid blue;

        /* Für richtige Browser. */

        margin-left:        auto;

        margin-right:        auto;

}

</style>

<body>

<table>

  <thead>

    <tr>

      <th>Art</th>

      <th>Menge</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Füchse</td>

      <td>13</td>

    </tr>

    <tr>

      <td>Tauben</td>

      <td>3058</td>

    </tr>

  </tbody>

</table>

Hoffe, es hilft.

Gruß
Thomas

Zitat:

Zitat von toscho

Zitat:

Zitat von weeh

Zuersteinmal zu den Scrollbars. Ich finde es schön und an der "usability" tut es auch nicht kratzen

Ach toscho - ich finde auch nicht, dass man das so eng sehen muss - die IE-User kennen die bunten Scrollbars doch und wissen, wie man damit umgeht. Ich mag die auch bunt, selbst wenn es nicht valide ist und ich da mittlerweile als Firefox-Userin nix von hab - hätte aber nix dagegen, wenn der Fuchs das noch lernen würde.... ;)

Ich bin wieder zurück.
Also viele deiner Hinweise habe ich befolgt, dazu habe ich mich noch einwenig im Web umgeschaut und gelesen das <table> out ist und <div> in :D.
Ich habe meine Page komplett umgecoded -Tabellenloses Html- und hab versucht alles "kaputte" zu reparieren.

Nein mein Menü bleibt. Meiner Meinung nach sieht man deutlich das das Links sind und die Scrollbars auch.

Sonst bin ich auf eure Kommentare gespannt und wie gesagt auch des Design wegens.

Ich habe aber auch noch eine Frage: Wie krieg ich es hin das wenn man zB im IE auf Favoriten klickt, dann erscheint auf der linken Seite ein Fenster (in den IE integriert) und drückt dann das eigentlich Fenster ein wenig zusammen und genau aus diesem Grund habe ich mein Page 720 breit gemacht (oder warens 700?) damit keine verticalen Scrollbars kommen.

Doch jetzt mit Definierung position: absolute left: 15% kommen trotzdem welche. Wie mache ich das?

Und dazu, fällt mir auf, hat sich die Fragestellung von meinem ersten Post von selbst geklärt, die ganzen Fehler sind gar nicht mehr da.
Jetzt möchte ich eigentlich nur noch wissen, ob der Code valide ist und wie mein Design ankommt.

Ich glaube, es ist am besten, wir gehen mit Dir mal Schritt für Schritt vor!

Fang mal bei Deinen Farben an - die sind echt kontrastarm! Mittelgraue Schrift auf weissem Untergrund (nur als Beispiel!) liest sich sehr anstrengend!

Auf preiswerten oder falsch eingestellten Monitoren (und davon existieren sehr viele!) wird nicht viel zu erkennen sein!

Welcher Code? Welches Design?

Ohne Link kann man da schlecht was zu sagen..... ;)

Ob der Code valide ist, kannst Du selbst testen: entweder beim W3C direkt: http://validator.w3.org/

oder auf Deutsch: http://www.validome.org/lang/ge

ich habs mal schnell in ein .txt reingepack hier die Links:

http://dimension-three.de/test.txt
(lustig ist natürlich was da der IE macht...)

dann die normalen

http://dimension-three.de/test.php

und

http://dimension-three.de/cont/root/css/style.css

Also danke für den Link ich habs getestet, mein Code ist vailde (html wie css).