michael: Kleine Darstellungsfehler: Wo am wenigsten Schaden?

Hi,

Meine Webseite http://www.thinkcool.ch hat leider noch ein paar kleine Darstellungsfehler. Ich teste mit Firefox und Internet Explorer.  Die Fehler tauchen je nach Lösungsvariante nur bei jeweils einem Browser auf - ich kann sozusagen wählen, in welchem Browser ich den Fehler will.

Es würde mich interessieren, in welchen Browser ihr die Fehler 'abschieben' würdet. Eine logische Vorgehensweise wäre, nach Marktanteil zu gehen: Der IE hat nunmal am meisten Marktanteil, also soll die Seite dort am besten dargestellt werden. Andererseits könnte ich mich auch nach dem Browser richten, der die Standards am besten implementiert. Das wäre wohl der Firefox.

Drei Fragen jetzt:
1. Wie würdet ihr entscheiden? Fehler in Firefox oder IE abschieben?
2. Oder gibt es eine Möglichkeit, dass _jedes_ erdenkliche Design in beiden Browsern gleich dargestellt wird? Nur mit CSS und HTML und ohne irgendwelchen schrecklichen Hacks.
3. Wenn die Entscheidung nach Marktanteil fallen würde: Welcher Browser dürfte bei einem technisch interessierten Publikum, bestehend aus Hobby-Programmierern, Hobby-Elektronikern, Studenten etc. am meisten verbreitet sein?

mfG, michael

  1. hallo,

    Meine Webseite http://www.thinkcool.ch hat leider noch ein paar kleine Darstellungsfehler.

    Sie hat entscheidende Konstruktionsfehler.

    Ich teste mit Firefox und Internet Explorer.

    Nimm mal Opera dazu. Der zeigt dir nämlich - gar nichts. Was auch korrekt ist. Auch wenn er den vollständigen Quelltext erhält.

    Es würde mich interessieren, in welchen Browser ihr die Fehler 'abschieben' würdet.

    Falsche Frage. Wenn man Fehler feststellt, so sind sie grundsätzlich zu beheben. Und bei der Fehlersuche hilft natürlich der Validator enorm weiter.

    Dein Problem: laut DOCTYPE möchtest du XHTML verwenden und ziehst auch die entsprechende DTD an. Im gesamten Rest deiner Seite ist aber überhaupt kein XHTML mehr zu finden.

    Eine logische Vorgehensweise wäre, nach Marktanteil zu gehen

    Nö. Logisch wäre, eine fehlerfreie Seite zu bauen.

    Grüße aus Berlin

    Christoph S.

    ss:| zu:) ls:& fo:) va:) sh:| rl:|

    -- Visitenkarte
    1. hallo,

      Meine Webseite http://www.thinkcool.ch hat leider noch ein paar kleine Darstellungsfehler.

      Sie hat entscheidende Konstruktionsfehler.

      Ohh...das hört man gerne. Da arbeitet man ein halbes Wochenende, nur um von den ungelobten Tabellendesigns wegzukommen und jetzt soll das neue auch schon wieder nicht recht sein. Aber ich mache ja kein Redesign, um schon wieder einen Schrotthaufen zu haben. Also könntest du mir evtl. sagen worin deiner Meinung nach die Konstruktionsfehler liegen? Ich bin wirklich sehr gerne bereit, sie zu beheben.

      Dein Problem: laut DOCTYPE möchtest du XHTML verwenden und ziehst auch die entsprechende DTD an. Im gesamten Rest deiner Seite ist aber überhaupt kein XHTML mehr zu finden.

      Worin manifestiert sich dies, und vorallem: Wie mache ich denn gültiges XHTML daraus? Oder soll ich gar kein XHTML verwenden, sondern HTML 4 (ist ja auch eine der von SELFHTML vorgeschlagenen Doctypes)

      Nö. Logisch wäre, eine fehlerfreie Seite zu bauen.

      Recht hast du ja - aber weisst du auch, wie schwierig dies ist? ;-)

      mfG, michael

      1. hallo,

        Da arbeitet man ein halbes Wochenende, nur um von den ungelobten Tabellendesigns wegzukommen und jetzt soll das neue auch schon wieder nicht recht sein.

        Da verwechselst du was. Ich habe nicht von konzeptionellen Fehlern (ein Tabellenlayout wäre sowas) gesprochen, sondern von Konstruktionsfehlern - und ich habe dir auch gesagt, was damit gemeint ist. Allerdings könntest du auch überlegen, ob du wirklich alle DIVs brauchst, die du jetzt verwendest. Ich meine, rund die Hälfte könntest du ohne Schaden wieder weglassen.

        Wie mache ich denn gültiges XHTML daraus?

        Die entsprechenden Hinweise findest du natürlich in SELFHTML.

        Oder soll ich gar kein XHTML verwenden

        Du hast ja bisher gar keins verwendet. Ändere dein DOCTYPE mal auf HTML 4.01, und schon ist deine Seite (fast) valide.

        Recht hast du ja - aber weisst du auch, wie schwierig dies ist? ;-)

        Selbstverständlich weiß ich das.

        Grüße aus Berlin

        Christoph S.

        ss:| zu:) ls:& fo:) va:) sh:| rl:|

        -- Visitenkarte
        1. Hello out there!

          und schon ist deine Seite (fast) valide.

          „Es gibt nur die Auswahl zwischen "0% valide" und "100% valide" - Validität ist wie Schwangerschaft, ein bißchen valide/schwanger geht nicht.“ [MudGuard]

          See ya up the road,
          Gunnar

          -- “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
      2. Hello out there!

        Wie mache ich denn gültiges XHTML daraus? Oder soll ich gar kein XHTML verwenden, sondern HTML 4

        XHTML ist schon OK. Nur, warum nicht Strict?

        Du musst lediglich die feinen Unterschiede [SELFHTML] beachten. (1)

        Logisch wäre, eine fehlerfreie Seite zu bauen.

        Recht hast du ja - aber weisst du auch, wie schwierig dies ist? ;-)

        Der W3C QA Markup Validation Service hilft dir dabei. Die vielen Fehler beziehen sich fast alle aufs Gleiche:

        (1) siehe oben

        (2) Und-Zeichen in URI-Attributwerten [HTML401], Ampersands, PHP Sessions and Valid HTML – mit Suchen und Ersetzen im Texteditor schnell behoben

        (3) richtige Verschachtelung von Listen [SELFHTML]

        (4) notwendiges alt-Attribut bei Bildern [SELFHTML]

        Der Sinn von CSS liegt in der Trennung von Dokumentstruktur (HTML) und Layoutangaben (CSS). Mit style-Attributen wird dass ad absurdum geführt; sämtliches CSS gehört gesammelt ins zentrale Stylesheet (style-Element oder externe Datei).

        See ya up the road,
        Gunnar

        -- “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
      3. Hi,

        selbst wenn ich die fehlende Zeichenkodierung durch eine passende ersetze und statt xhtml nur html 4.01 transitional nehme, bleiben immerhin noch 113 Fehler übrig - zugegben due meisten durch Schlampigkeit, die das Layout nicht tangiert. Aber dennoch erschwert das die Suche nach der Ursache extrem.

        freundliche Grüße
        Ingo

        -- [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
  2. Hi,

    Die Seite _ist_ jetzt "Valid HTML 4.01 Strict". Die Darstellungsunterschiede bleiben aber genauso bestehen.

    • Der IE bastelt bei der verschachtelten Liste jeweils noch einen leeren Zwischenraum.
    • Ebenso zeigt er für ein eigentlich leeres Hintergrunddiv noch eine leere Zeile an.
    • Der border-bottom bei den inhaltsabhängigen Bildern in der rechten Spalte ist beim IE jeweils 3 Pixel tiefer als beim Firefox.

    Was mache ich bloss falsch? Langsam beginne ich echt an mir zu zweifeln... Wie kriege ich diese Seite bloss in gängigen Browsern zu einem gleichen Aussehen?

    mfG, michael

    1. Hi,

      Die Seite _ist_ jetzt "Valid HTML 4.01 Strict".

      mit noch zwei CSS-Fehlern un fehlender Schriftfarbe...

      • Der IE bastelt bei der verschachtelten Liste jeweils noch einen leeren Zwischenraum.

      Welche verschachtelte Liste? Du meinst die DIVs im Inhaltsbereich? Vermeide relative Positionierung mit negativen Werten.

      • Ebenso zeigt er für ein eigentlich leeres Hintergrunddiv noch eine leere Zeile an.

      Was ist ein leeres Hintergrunddiv und wo soll das sein? Verwende nicht nur valides, sondern auch sinnvolles Markup und überlasse die Gestaltung CSS. Für die Positionierungen bietet sich float und margin an.

      • Der border-bottom bei den inhaltsabhängigen Bildern in der rechten Spalte ist beim IE jeweils 3 Pixel tiefer als beim Firefox.

      Ich weiß zwar nicht, wo die zu finden sein sollen, das hört sich aber nach einr Unterlänge an, die der IE für evtl. Text freihält. Nutze vrtical-align oder display:block.

      Was mache ich bloss falsch?

      Noch einiges mehr. So habe ich selbst im nahezu 1024px breitem Fenster noch einen störenden Querscrollbalken, rote Schrift und border und unter den seitlichen Boxen einen nicht so schönen grauen Hintergrund. Und bei Schriftvergrößerung spielt das Menü nicht mehr ganz mit.
      Vergleiche Dein Layout diesbezüglich mal mit http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm.

      freundliche Grüße
      Ingo

      -- [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
      1. Hallo

        Danke für deine Antwort. Mein neues Posting wurde zwar als Doppelposting taxiert. Nur dort war allerdings das Problem wirklich aktuell beschrieben - den Rest konnte ich selbst lösen. Ein bisschen was habe ich schon überlegt, als ich ein neues Posting startete.

        Werde mir aber deine Ratschläge mal ansehen!

        Könntest du mir evtl. noch verraten, wo die CSS-Fehler sind bzw. wie man CSS-Files validieren kann?

        mfG, michael

        1. Hi,

          Mein neues Posting wurde zwar als Doppelposting taxiert.

          Als Folgeposting. Und das Thema ist eigentlich immer noch "Darstellungsfehler" - obwohl den Fehler mit dem Hintergrund der IE macht und nicht wie Du annimmst der Firefox.

          Der IE setzt die Dimensionen des Ober-div korrekt, nämlich nach dem Platzbedarf aller Kind-Elemente.

          ist genauso falsch gedacht wie der IE es umsetzt. Positionierte oder gefloatete Elemente beeinflussen die Größe einer im Elementenfluß befindlichen Elternbox nicht.

          Übrigens: wenn Du hier vor dem Abschicken eines Postings die Vorschau wählst, kannst Du dort sowohl den Themenbereich als auch den Betreff ändern. Das ist haargenau für solche Folgefragen gedacht.

          freundliche Grüße
          Ingo

          -- [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
          1. Hallo

            Der IE setzt die Dimensionen des Ober-div korrekt, nämlich nach dem Platzbedarf aller Kind-Elemente.

            ist genauso falsch gedacht wie der IE es umsetzt. Positionierte oder gefloatete Elemente beeinflussen die Größe einer im Elementenfluß befindlichen Elternbox nicht.

            Ok - sowas habe ich mir gedacht. Nur: Wie kann ich jetzt bewirken, dass meine zentrierter Webseiten-Bereich einen weissen Background bekomme?
            Ich hab alles versucht, aber irgendwie klappt da rein gar nichts.

            mfG, michael

            1. Hallo

              Und jetzt zeigt der Firefox auch noch zufällig an, wie es ihm gerade so passt. Bei der genau gleichen Seite siehts mal so, mal so aus.

              mfG, michael

            2. Hi,

              Wie kann ich jetzt bewirken, dass meine zentrierter Webseiten-Bereich einen weissen Background bekomme?

              Natürlich mit clear, wenn die floatenden Elemente höher als die Containerbox sind.
              Und min-height:700px ist nun wirklich keine gute Idee.

              freundliche Grüße
              Ingo

              -- [barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
    2. Hallö, michael,

      ohne meinen Vorrednern widerspechen zu wollen:

      Die Seite _ist_ jetzt "Valid HTML 4.01 Strict".

      Der Große Validator ist da anderer Meinung…

      Grüße aus Leipzig
      willie

      -- sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:} va:} de:> zu:} fl:( ss:| ls:[ js:|
      Selfcode Decoder