Einsteiger Frage zu Browserkompatibilität + Contao

[SMP]

Hallo Community,

bin neu hier und begeistert von Contao. Bei meiner ersten Umsetzung mit Contao und Firefox hab ich schon einiges geschafft (Dank an Thomas Weitzel für sein tolles Buch )
Was mich "ärgert" ist das einiges in meinem Design im Firefox aussieht so wie ich es will, im IE9 aber leider nicht da steht wo es soll oder gar nicht funktioniert.

Wie macht Ihr das? Trotz Suchfunktion hab ich nichts allgemeines dazu im Forum gefunden. Vieleicht kann mir einer der Experten einen Tip geben? Ich möchte das meine Seite zumindest im IE 7+8+9 und Firefox angezeigt wird. Ich weiß das es diverse "hacks" gibt um Probleme zu beheben, aber gibt es auch eine Übersicht, was man vermeiden sollte, was man auf jedenfall braucht?
Was sollte man vermeiden?

Vg,
Norbert

[Vollpfosten]

Es gibt kein Patentrezept und man wird es vermutlich nie allen recht machen. Ich kann mich noch an die Zeiten erinnern, wo man auf fast jeder Homepage diese neckischen Hinweise "optimized for IE", "best view with Netscape" usw. fand.

[RainerG]

Es gibt Frameworks wie YAML, die weitestgehend dafür sorgen, die Ausgaben auf allen Browsern gleich zu gestalten. Es gibt hier auch ein paar Threads, die sich mit YAML unter Contao beschäftigen.

[SMP]

Hallo RainerG,

danke YAML scheint die Idee zu verkörpern die ich im Kopf habe. Mehr Browserstabilität ohne Webdesigner Hirnschmalz.
Werd mich damit mal im Detail beschäftigen.

vielen Dank!
Norbert

[wotank]

Moin,

das etwas im aktuellen FF anders dargestellt wird als im IE9 ist eher ungewöhnlich, da der IE ja mittlerweile die Webstandards beachtet.
Deshalb wäre ein Link zur Problemsite gut, damit man sich das mal anschauen kann.

YAML ist ein Framework, was eine gewisse Einarbeitungszeit erfordert, zudem wird man dort mit etlichen CSS-Dateien zugemüllt, was auch nicht jedermanns Geschmack ist.
Außerdem ist es keine eierlegende Wollmilchsau, die einen davon befreit, sich XHTML/CSS-Grundkenntnisse anzueignen.
Für die Grundkenntnisse gibt es Little Boxes. Der Autor hat auch ein Buch zu Contao geschrieben, welches Anfänger umfassend informiert.

[hofff]

Hallo,

das mit der browserkompatiblen Darstellung ist kein Problem von Contao, sondern vom CSS was geschrieben wird. Aber hier kann man zwar sagen, dass YAML und Co. dabei helfen, eine browserübergreifende Ansicht zu garantieren, aber auch mit YAML kann ich alles verbauen. Du solltest Dich eindringlich mit CSS beschäftigen! Die beiden Little Boxes Bücher sind dafür auf jeden Fall bestens geeignet! Außerdem solltest du Dich ein bisschen mit den Eigenheiten der einzelnen Browser und deren Kompatibilität zu einzelnen CSS Anweisungen beschäftigen. In Little Boxes wird da auch schon sehr viel dazu geschrieben.

fg
nicky


... von meinem iPhone mit Tapatalk gesendet.

[pmmueller]

YAML scheint die Idee zu verkörpern die ich im Kopf habe. Mehr Browserstabilität ohne Webdesigner Hirnschmalz.

Ich will dich nicht desillusionieren, aber YAML ist nur sehr bedingt für Einsteiger geeignet. Wie alle Frameworks ist YAML ein Werkzeug und keine Lösung. Anders ausgedrückt: Ein Framework ersetzt kein Wissen, sondern erleichtert dessen Anwendung. Wenn du dieses Wissen gar nicht haben möchtest, solltest du zu einem Website-Baukasten wie Jimdo greifen.

Um dir einen Eindruck von der Komplexität von YAML zu geben: Die ersten zwanzig Kapitel von "Das große Little Boxes-Buch" sind ein Grundkurs in HTML und CSS, indem man die wichtigsten Prinzipien begreift. YAML wird erst ganz am Ende des Buches vorgestellt, von Kapitel 34 bis 36.

Contao hat übrigens ein CSS-Framework integriert. Das ist nicht so leistungsfähig wie YAML, reicht aber für die allermeisten Websites völlig aus. little-boxes.de basiert auf Contao und YAML, aber der Hauptgrund dafür ist, dass ich damals das integrierte CSS-Framework nicht wirklich begriffen hatte und YAML schon gut kannte. Heute würde ich das wahrscheinlich ohne YAML bauen. Gerade wenn du noch am Lernen von Contao bist, schaffst du dir mit YAML eine zweite große Baustelle, wo du nachher garantiert nicht mehr weißt, wo der Fehler liegt.

Ach ja: Und ein Link zu deiner Site oder zumindest ein Screenshot wären hilfreich.

[pmmueller]

Die beiden Little Boxes Bücher sind dafür auf jeden Fall bestens geeignet!

Es gibt nur noch ein großes

[hofff]

Es gibt nur noch ein großes

ok ... jetzt ein großes ... ;-)

Hat sich da eigentlich viel geändert im Bezug auf die 2 einzelnen? Behandelst du mehr CSS3? Ist das Buch eher auf Einsteiger abgezielt oder kann man "Profi" auch noch was erfahren? ;-)

fg
nicky


---
I am here: http://maps.google.com/maps?ll=51.342677,12.392624
--
von meinem iPad mit Tapatalk gesendet.

[RainerG]

Es gibt nur noch ein großes

Waren das vorher nicht drei Bücher? Teil 0, 1 und 2? Oder ist Teil 0 nicht ins große Buch gewandert?

[SMP]

Hallo Wotank, hallo Peter,

danke für die TIPS. Hab auch gestern noch mal gestöbert und mich für das Little Boxes entschieden. Ich glaub auch das ich erst mal meine Basics verbesseren muss. Dann weiß ich wenigstens warum das schief geht.
Hab mir gestern das Little Boxes Buch bestellt. Obwohl ich nach dem Hören von Peters Interview zu contao auch gerne das Contao Buch durchstöbern will. Aber man kann ja nicht alle Bücher auf einmal lesen...

Was ich noch vermisse ist eine Info wie Ihr mit dem Problem umgeht? Wie sieht eure Rezept aus? Ein CSS für IE und eins für den Rest, oder wie geht Ihr vor? Gibt es irgendwo eine Übersicht welche CSS Anweisungen unterschiedlich (auf Pixeleben) interpretiert werden.

Ich hab den Eindruck das meine Problem mit position absolute angefangen haben... Damit hab ich im Firefox auf den Pixel alles dahin bekommen wo ich wollte, aber eben nicht im IE.

Freu mich wenn Ihr mich an euren Erfahrungen teilhaben last

[SMP]

hallo Peter,

klar gerne, hier meine aktuelle Spielwiese. http://contao.solve-my-problem.de
Spannend find ich z.B. das das das Copy Right Modul (unten links im Firefox) im IE komplett verschwindet...

vg, Norbert.

[pmmueller]

Hat sich da eigentlich viel geändert im Bezug auf die 2 einzelnen? Behandelst du mehr CSS3? Ist das Buch eher auf Einsteiger abgezielt oder kann man "Profi" auch noch was erfahren?

Zielgruppe sind sicherlich eher Einsteiger. Profis werden nicht viel lernen, es sei denn das sie hinterher vielleicht strukturierter an die Sache rangehen.

Der ekz.bibliotheksservice hat das Buch gerade den angeschlossenen Bibliotheken zur Anschaffung empfohlen und fasst das so zusammen:

Müller hat aus seiner 2-bändigen Vorgängerausgabe ein 1-bändiges, neu kompiliertes Werk geschaffen, das die Veränderungen, die HTML5 mitbringt, berücksichtigt, hat alte Inhalte entfernt und Neues hinzugefügt. Die vormals getrennten Inhalte greifen nahtlos ineinander.

Jetzt können Einsteiger und Fortgeschrittene das gleiche Buch in die Hand nehmen und werden gleichermaßen zufrieden sein. Dafür sorgt zum einen die gelungene Themenauswahl und zum anderen die gute Verständlichkeit.

CSS3 ist auch drin, in Kapitel 24. Bevor du fragst, ob sich eine Anschaffung lohnt, wenn man die alten schon hat: Das weiß ich nicht. Aber das Feedback von Lesern, die die vorherigen Ausgaben schon durchgearbeitet und sich jetzt »Das große Buch« gekauft haben, ist bis jetzt ausnahmslos positiv. Will heißen, sie haben den Kauf nicht bereut

Waren das vorher nicht drei Bücher? Teil 0, 1 und 2? Oder ist Teil 0 nicht ins große Buch gewandert?

»Das große Buch« ist wieder ein reiner Grundkurs zu HTML & CSS. Also kein Teil 0.

Teil 0 hatte ja den Untertitel »Was Sie wissen sollten, bevor Sie eine Website bauen (lassen)«. Die paar Leser fanden den Teil 0 echt gut, allerdings war der Titel mit der Null darin eine eher blöde Idee, die aus einer Bierlaune heraus entstanden ist. Teil 0 bildet die Grundlage für ein Buch namens »Die Homepage-Schule«, das fertig geschrieben ist im November 2011 erscheinen wird.

[pmmueller]

klar gerne, hier meine aktuelle Spielwiese. http://contao.solve-my-problem.de
Spannend find ich z.B. das das das Copy Right Modul (unten links im Firefox) im IE komplett verschwindet...

Wenn ich das auf den ersten Blick richtig sehe, kommt nicht einmal das HTML im IE an. Das deutet auf defekte HTML-Strukturen. Hast du das HTML mal validiert? Momentan sind 38 Fehler drin:

• http://validator.w3.org/check?verbos...my-problem.de/

Wenn du XHTML als DOCTYPE nimmst, muss du leere Elemente mit Leerstelle-Schrägstrich beenden: <input ... />, <img />. Das Attribut in <form> heißt "method" und nicht "methode" und so weiter.

In Zeile 276 kommt dann die Copyright-Meldung mit der Anmerkung "end tag for element "p" which is not open". Könnte gut sein, das der IE das nicht versteht. Wenn das HTML nicht valide ist, können die Browser machen was sie wollen, und der IE macht das mehr als die anderen...

Im CSS hast du die Copyright-Meldung nach links gefloatet und mit position:relative versehen. Willst du damit was Bestimmtes bezwecken? Der fängt doch eh links an.

[pmmueller]

Hab mir gestern das Little Boxes Buch bestellt. Obwohl ich nach dem Hören von Peters Interview zu contao auch gerne das Contao Buch durchstöbern will. Aber man kann ja nicht alle Bücher auf einmal lesen...

Arbeite die ersten 20 Kapitel von Little Boxes durch. Danach hast du solides Grundlagenwissen, kannst mit dem Contao-Buch anfangen und wirst das CSS darin verstehen.

Was ich noch vermisse ist eine Info wie Ihr mit dem Problem umgeht? Wie sieht eure Rezept aus?

Rezept:

• Valides HTML schreiben.
• Sauberes CSS dazu
• Von der Idee weg kommen, dass Webseiten in allen Browsern pixelgenau gleich aussehen müssen.

Den Umgang mit position:absolute lernst du übrigens in Kapitel 14.

Potenzielle Extra-Schwierigkeit für dich, wenn du Little Boxes und das Contao-Buch durchackerst:

• In "Little Boxes" gebrauche ich die Syntax von HTML5, erzeuge die Layoutbereiche aber weiterhin mit <div id="header"> und so weiter.
• In Contao würde ich dir als DOCTYPE eher XHTML Strict oder Transitional empfehlen, und nicht "HTML" (was HTML5 ist), da Contao sonst auch die HTML5-Layoutelemente benutzt (<header>, <nav> etc.).

Das klingt hochtrabender als es ist: Du musst in Contao mit XHTML anders als in Little Boxes leere Elemente mit Leerstelle-Schrägstrich beenden. <input ... /> und nicht <input ...>. Siehe oben. Das ist fast alles

[SMP]

Wenn ich das auf den ersten Blick richtig sehe, kommt nicht einmal das HTML im IE an. Das deutet auf defekte HTML-Strukturen. Hast du das HTML mal validiert? Momentan sind 38 Fehler drin:

• http://validator.w3.org/check?verbos...my-problem.de/

Wenn du XHTML als DOCTYPE nimmst, muss du leere Elemente mit Leerstelle-Schrägstrich beenden: <input ... />, <img />. Das Attribut in <form> heißt "method" und nicht "methode" und so weiter.

In Zeile 276 kommt dann die Copyright-Meldung mit der Anmerkung "end tag for element "p" which is not open". Könnte gut sein, das der IE das nicht versteht. Wenn das HTML nicht valide ist, können die Browser machen was sie wollen, und der IE macht das mehr als die anderen...

Im CSS hast du die Copyright-Meldung nach links gefloatet und mit position:relative versehen. Willst du damit was Bestimmtes bezwecken? Der fängt doch eh links an.

Hallo Peter, danke für deine Hilfe und das du dir das angeschaut hast.

Ich schau mir das heut abend mal in ruhe an ;-) Das Floaten war, da ich in der Fußzeile eigentlich noch das Menu auf selber höhe Rechts daneben haben wollte. Hat aber leider nicht geklappt ... Ich glaub ich muss mal meine ganzen trail und errors aufräumen. Mir ist auch schon aufgefallen das die grünen Validierungshaken im Webdeveloper immer weniger werden...

Ich wollte auf die 2. Auflage des Contao Buchs warten (November ?!) Bis dahin hab ich dann hoffentlich die ersten 20 Kapitel von Little Boxes durch

[SMP]

Arbeite die ersten 20 Kapitel von Little Boxes durch. Danach hast du solides Grundlagenwissen, kannst mit dem Contao-Buch anfangen und wirst das CSS darin verstehen.


Rezept:

• Valides HTML schreiben.
• Sauberes CSS dazu
• Von der Idee weg kommen, dass Webseiten in allen Browsern pixelgenau gleich aussehen müssen.

Hallo Peter (und alle anderen die mir bei dem Problem helfen wollten!)

ich denk bei allem was ich schon über CSS gelesen hab ist hängen geblieben, dass ich nun pixelgenau gestalten kann. Da ich mich dazu mit einen Screenlayouts in Photoshop befast habe (und auch da einen Entwurf für die Seite gemacht habe), wollte ich das nun pixelgenau umsetzen.

Aber schon nach dem lesen des ersten Kapitel aus little Boxes hab ich gelernt:

.... wenn Sie Webseiten gestalten wollen, müssen Sie zunächst aufhören, Webseiten gestalten zu wollen.Tao. Lassen Sie los. Sie haben sowieso keine Kontrolle über das Aussehen der Seite im Browser des Betrachters.

(insbesondere wenn das ein Tablett oder Smartphone ist....

Das heißt ich werd mich nun darauf konzentrierenein Mediengerechtes Webdesign zu erstellen (S. 47) und da mit fehlerfreiem XHTML und CSS.
Einfach mal jquery.js einbinden und was aus eine Demo kopieren, kann funktionieren, muss aber nicht...

In diesem Sinne noch mal dank an euch alle, und nun lese ich die Restlichen 18 Kaptitel, bei Peters schreibstiel fällt mir das bestimmt leichter als ich beführchtet habe!

Gruß Norbert

[pmmueller]

und nun lese ich die restlichen 18 Kaptitel, bei Peters Schreibstil fällt mir das bestimmt leichter als ich beführchtet habe!

Na dann viel Spaß dabei

[RainerG]

ich denk bei allem was ich schon über CSS gelesen hab ist hängen geblieben, dass ich nun pixelgenau gestalten kann. Da ich mich dazu mit einen Screenlayouts in Photoshop befast habe (und auch da einen Entwurf für die Seite gemacht habe), wollte ich das nun pixelgenau umsetzen.

In Besonderen Fällen macht das durchaus mal Sinn, das ein oder andere genau zu positionieren. Aber ansonsten hat PM vollkommen recht. Man kann es halt nicht jedem Browser gleich recht machen und muss auch mal mutig sein, ältere Browseroldtimer nicht mehr zu unterstützen (dann sieht das bei denen eben mal daneben aus). Zu groß sind halt die Unterschiede und die Vielfalt der alten Browser.

[soweit_ok]

Hallo SMP,

wie auch die Vorposter kann ich Dir eigentlich nur raten, eine Entscheidung für den Einsatz von CSS-Frameworks wie YAML auf einen Zeitpunkt zu verschieben, zu dem Du HTML u. CSS souverän beherrscht. Wobei das Wichtigste im Verständnis von Struktur und Verknüpfungen besteht. Denn das betrifft das Ganze, wohingegen "pixelgenaues" Layouten einzelner Elemente stets nur einen winzigen Ausschnitt betrifft. Sinnvolle Verwendung von Frameworks können Dir Arbeit abnehmen, doch ohne fundierte Kenntnisse der Basics wirst Du sie eben nicht sinnvoll einsetzen können. Bis dahin kannst Du nichtmal abgrenzen, ob die Verwendung von z. B. YAML in Bezug auf die jeweiligen Anforderungen der geplanten Webseite nicht sogar eher kontraproduktiv wäre.

Was Crossbrowserkompatibilität für jene Browser betrifft, die Du unterstützen willst, wärest Du am besten dran, zunächst den kleinsten gemeinsamen Nenner zu kennen, bei dem in all diesen Browsern keine nennenswerten Unterschiede in der Darstellung zu erwarten sind. So kannst Du zügig passable Webseiten aufbauen, ohne mit anspruchsvollsten Spezialitäten und irgendwelchen Browserhacks ein Riesen-Fass aufzumachen.

Ansonsten rate ich Dir zur Verwendung von Tools wie der Firefox-Extension Firebug und/oder dem Opera-Inlinetool Dragonfly. Die verhelfen Dir u. a. auch zu einem schnelleren Verständnis des Contao CSS-Frameworks. Und Du kannst damit auch prima andere Contao-Webseiten analysieren, wie bestimmte Dinge dort gelöst sind.

Im Grunde müsste man Einsteigern eigentlich empfehlen, mal eine (nicht zu simple) Webseite ohne Werkzeuge wie Contao aufzubauen, sondern lediglich mit einem schlichten Texteditor ohne Synthax-Highlighting und sonstigem Schnickschnack. Mit dieser Aussage will ich Dich natürlich nicht von Contao wegtreiben. Doch solcher Mangel an Komfort könnte Dir jedenfalls ungeschminkt realistisch zeigen, wo Du kenntnismäßig derzeit wirklich stehst und was Du mindestens noch lernen solltest. Und so erworbenes Wissen brennt sich einfach tiefer in die grauen Zellen ein. Dasselbe gilt für PHP und JS.

[SMP]

Hallo SMP,

wie auch die Vorposter kann ich Dir eigentlich nur raten, eine Entscheidung für den Einsatz von CSS-Frameworks wie YAML auf einen Zeitpunkt zu verschieben, zu dem Du HTML u. CSS souverän beherrscht.

Hallo Soweit_ok,

danke für den Ratschlag, aber YAML war mal nett zu lesen, steht aber nicht auf meiner Liste der Todos. Es sei den ich beherrsche HTML und CSS so gut und fehlerfrei, das ich neu Herrausvorderungen suche. Ich bin gerade wie gesagt dabei meine Grundlagen in HTML + CSS aufzufrischen und abzurunde. Das Informatikstudium ist schon lange her, da hab ich noch mit Tabellen oder Frames codiert...und auch nur für den Hausgebrauch Firebug, webdeveloper und View Source Chart sind aktuell meine besten Freunde in der Lerngruppe.

Was Crossbrowserkompatibilität für jene Browser betrifft, die Du unterstützen willst, wärest Du am besten dran, zunächst den kleinsten gemeinsamen Nenner zu kennen, bei dem in all diesen Browsern keine nennenswerten Unterschiede in der Darstellung zu erwarten sind. So kannst Du zügig passable Webseiten aufbauen, ohne mit anspruchsvollsten Spezialitäten und irgendwelchen Browserhacks ein Riesen-Fass aufzumachen.

KgV ist immer gut. Wie finde ich den? Ich will ja schon eine moderne Webseite erstellen, d.h. mit XHTML, CSS2, mootools( Accordion, Lightbox, Galarien, Slideshows, ...) .
Ich kann und will auch nicht auf transparente PNGs verzichten (damit ist der erste IE6 Hack fällig) und cufon hab ich auch schon genutzt, kannst du mir einen Tip geben wo eine Übersicht zu den Fallen der Browserkompatibilität liegen? Beim googeln ist mir nichts gescheites über den Weg gelaufen.

Norbert

[soweit_ok]

Was ist denn KgV? Diese Abkürzung sagt mir jetzt nix.

Nein, ich hab leider keine Komplettübersicht von Browserkompatibilitätsfallen auf Tasche. Und die gibts ja nicht nur bei CSS - einige auch in den JS-Engines und im DOM-Bereich, z. B. die bislang sehr magere und auch noch unterschiedliche Unterstützung des Object-Tags in allen Browsern.

Na ja, wenn Du mal Informatik studiert hast, dann hast Du doch immerhin schon ein paar IT-Grundkenntnisse und das bisschen CSS ist schließlich nicht so wild.

[RainerG]

KgV = Kleinste gemeinsame Vielfache
--> http://de.wikipedia.org/wiki/Kleinst...mes_Vielfaches ;-)

[soweit_ok]

KgV = Kleinste gemeinsame Vielfache

Aha. Was es nicht alles gibt. Na dann kannst Du ja SMP eigentlich auch gleich erzählen, wie oder wo er das Webseiten-KgV findet, gell. ;-) Was allerdings nicht ganz einfach sein dürfte, weil er wohl eher das NggV bevorzugt (Nicht gemeinsames größtes Vielfaches) und das dann auch alles im IE6 funktionieren soll.