Darstellungsprobleme unterschiedlicher Browser vorbeugen

  • Hallo.

    Es macht mich noch wahnsinnig diese unterschiedliche Darstellung in verschiedenen Browsern.
    Gibt es irgendwo eine Liste oder ähnliches auf der man sieht, wie man Darstellungsfehler der verschiedenen Browsern im CSS korrigieren kann? Gerade habe ich wieder so einen Fall. Der FF stellt einen umfliesenden Text eines Fotos (mit float left und padding 15px) korrekt dar. Rufe ich das ganze im IE auf wird das padding kleiner angezeigt - also so ungefähr 10px. Dadurch wird natürlich der rechts neben dem Foto stehende Text falsch umgebrochen, was ich nicht möchte.
    Jetzt hab ich keine Ahnung warum das IE das so falsch anzeigt und wie ich das CSS so schreiben kann, dass es auf beiden (allen) Browsern korrekt dargestellt wird. Hat jemand vielleicht so eine Art Referenzliste?

    Danke!

  • Hallo

    Hast du einen Link zu der Seite? Erfahrungsgemäß befinden sich bei solchen Fragen in dem Quellcode verschiedene Fehler.

    Zitat

    warum das IE das so falsch anzeigt

    Diese Schlussfolgerung ist schon mal grundsätzlich falsch. Wenn ein Browser eine Seite nicht so anzeigt wie du es erwartest liegt es zu 99,99% am HTML- / CSS-Quelltext. Also am Individuum an der Tastatur. Die Browser zeigen das an, was ihnen vorgegeben wird. Nur auf fehlerhafte Eingaben reagieren sie unterschiedlich.

    Zitat

    Dadurch wird natürlich der rechts neben dem Foto stehende Text falsch umgebrochen

    Text soll je nach Fenstergröße angepasst umgebrochen werden.

    Zitat

    Es macht mich noch wahnsinnig diese unterschiedliche Darstellung in verschiedenen Browsern.

    Diese Ansicht stammt aus dem letzten Jahrtausend und ist durch die unterschiedlichen Ausgabegeräte überholt und veraltet. Heutzutage ist das Ziel, das der Inhalt von Internetseiten für den Besucher möglichst leicht zu lesen bzw. aufzunehmen sein soll. Wer feste Größen benutzt greift zu Word, zu Plakaten, zu Flyern oder zu pdf-Dateien. Bei denen kann man eine feste Größe definieren.

    Jeder Browser bringt sein eigenes CSS-Stylesheet mit. Um die auf eine einheitliche Grundlage zu bringen solltest du mal nach "css normalisierung" googeln. Dadurch sollen die unterschiedlichen Abstände, Schriftgrößen, Schriftarten u.s.w. der unterschiedlichen Browser aneinander angepasst werden.

    Zudem solltest du darauf achten, das bei den Browsern auch der gleiche Zoomfaktor vorgegeben ist.

    Gruss

    MrMurphy

  • Hallo MrMurphy.

    Einige Selektoren muss man doch z.B. im IE anders schreiben als in anderen Browsern. Ein genaues Beispiel habe ich jetzt leider nicht und ich hoffe du verstehst was ich meine. Gibt es eine Art Referenz wo man erkennen kann, welcher Selektor (CSS) in bestimmten Browsern anders geschrieben werden muss?

    VIELEN DANK!

    Gruss

  • Hallo,

    es ist natürlich schwierig dir konkrete Antworten zu geben, wenn du kein konkretes Beispiel nennst. Stell' doch einfach mal eine Seite online bereit, die dir Probleme bereitet. Dann kann man dir auch helfen.

    Zitat

    Einige Selektoren muss man doch z.B. im IE anders schreiben als in anderen Browsern.

    Nein.

    Zitat

    Ein genaues Beispiel habe ich jetzt leider nicht ...

    Weil es wie schon geschrieben keine gibt.

    Zitat

    Es macht mich noch wahnsinnig diese unterschiedliche Darstellung in verschiedenen Browsern.

    Du hast doch selbst Probleme. Das sind für dich doch die besten Beispiele und für uns die beste Grundlage dir zu helfen. Die kannst du doch wie schon geschrieben als Beispiel bei einem Freewareprovider wie bplaced.net online stellen.

    Zitat

    Gibt es eine Art Referenz wo man erkennen kann, welcher Selektor (CSS) in bestimmten Browsern anders geschrieben werden muss?

    Aus den genannten Gründen wäre so eine Referenz sinnlos.

    Grundlage für das aktuelle HTML5 und CSS3 sind die Zusammenschlüsse vom W3C und WHATWG. Wobei in der WHATWG alle Browserhersteller mitarbeiten und entsprechend auf einheitliche Standards und Schreibweisen achten.

    "Unterschiedliche Schreibweisen" gibt es nur in CSS zu noch nicht freigegebenen Anweisungen, die sich in der Testphase befinden. Dort muss eventuell für unterschiedliche Browser ein sogenanntes Präfix verwendet werden. Das gilt also auch nur für HTML5 und CSS3.

    Wenn man sich damit nicht auskennt sollte man von solchen sich in der Testphase befindlichen Anweisungen die Finger lassen. Und schon gar nicht sollte man die mit HTML4 oder XHTML benutzen. Das sind auch immer wieder gerne gemachte Fehler.

    Welche Browser welche CSS-Anweisungen in HTML5 und CSS3 unterstützen und für welche Versionen Präfixe erforderlich sind kann auf der Seite

    http://caniuse.com/

    nachgeschaut werden.

    Gruss

    MrMurphy

    3 Mal editiert, zuletzt von MrMurphy (26. April 2014 um 11:09)

  • Ich habe nichts online zu stellen da ich den Fehler auf andere Weise gelöst hatte.
    Aber der LINK den du geschrieben hast hilft mir schon sehr weiter.
    Hab vielen Dank!