Darstellungsproblem von CSS beim IE (IE9 und weitere)

[fabio13]

Hallo Community
Ich habe ein Probelm. Habe meine Homepage auf heute neu aufgeschaltet. Die Homepage funktioniert auf Safari, Firefox und Google Chrome wie gewünscht. Beim IE gibt es Probleme. Ich verwende im Geschäft einen IE 9 (Version 9.0.8112) hier erscheint die Homepage komplett ohne Layout. CSS wird nicht angezeigt. Ich vermute die Homepage lauft auf allen IE nicht wie gewünscht. Gibt es einen simplen weg um die Homepage für alle Browser kompatibel zu machen. Ausser natürlich die ganz alten Browser. Die Homepage ist unter www.knoepfel-reisen.ch aufrufbar. Das Ausgabeformat ist XHTML strict.
Vielen Dank für Vorschläge
Freundlicher Gruss
Fabio Knöpfel

[fabio13]

und so sollte es in etwa aussehen!

[Logo]

Hallo,
welche Contao 2.11 benutzt Du? Bei mir funktioniert meine Seite in Firefox Chrome Safari und IE 9

[fabio13]

Contao 2.11.2

[Logo]

Habe meine Homepage auf heute neu aufgeschaltet.

Wie hast Du was genau gemacht?

[lindesbs]

Du hast einige CSS Fehler : http://jigsaw.w3.org/css-validator/v...l-reisen.ch%2f
Weshalb der IE die ganzen Body Definitionen nicht einlaedt.

[fabio13]

genauer gesagt hat ein Bekannter agiert als Webserver. Wie das genau funktioniert, weiss ich nicht. Kann das Problem durch Schreibfehler bei den .css-Elementen hervorgerufen werden? sollten aber eigentlich stimmen. Habe das news_latest.xhtml template geändert liegt das Problem hier? kann ich mir auch nicht vorstellen.

[lindesbs]

Hast Du das CSS ueber den eingebauten CSS Editor erstellt, oder per Hand ?
Weil er dies hier anmeckert :

pre,code{font:12px "Lucida Console",Monaco,monospace}

[fabio13]

vielen dank. dann mach ich mal ein paar Korrekturen

[fabio13]

beides. teilweise von hand, teilweise über den Editor. ist schon zulässig so?

[lindesbs]

Zulaessig ja klar.
Aber der Validator findet halt Probleme. Und meiner Meinung nach, sind das genau die Probleme, weshlab der IE die Seite ohne CSS anzeigt.

[fabio13]

musste feststellen, dass viele "Fehler", welche der css-Validator angibt, genauso im Buch "Website erstellen mit Contao" von Peter Müller stehen. muss noch irgendeine einstellung geändert werden, damit der IE die css-Elemente auch erkennt?

[pmmueller]

Hallo,

welche Buchausgabe und welche Contao-Version benutzt du?


Validator
Viele der Fehler vom CSS-Validator werden nur angezeigt, weil CSS2.1 eingestellt war. Ändere das mal auf CSS3.0:

http://jigsaw.w3.org/css-validator/v...fel-reisen.ch/

Dann wird die Sache etwas übersichtlicher, und es bleiben ein paar Tippfehler:

Ungültige Nummer : font-size Lexical error at line 11, column 701. Encountered: "%" (37), after : "" %;

Zwischen Wert und Einheit KEINE Leerstelle (siehe "Little Boxes"). Was mich sehr wundert ist, dass der Fehler in der Datei basic.css auftaucht. Hast du die von Hand abgeschrieben? Die gibt es fix und fertig zum Importieren.

Das gleiche in bildschirm.css. Hier ein paar Beispiele:

• a: focus{text-decoration: underline}
  (keine Leerstelle nach dem Doppelpunkt, siehe "Little Boxes")
• Die Eigenschaft paadding-bottom existiert nicht : 1px (Tippfehler)
• Ungültige Nummer : margin nur 0 kann ein length sein. Nach der Zahl muß eine Einheit stehen. : 8
  (da fehlt die Einheit px)
• Die Eigenschaft life-style-type existiert nicht : none
  (einer der schönsten Vertipper, die ich je gesehen habe...)
• Ungültige Nummer : top –9999px ist kein top-Wert : –9999px
  (Da ist wahrscheinlich irgendein komisches Zeichen nach dem Doppelpunkt)
• /* Ende @media{}
  (Das Kommentarende */ fehlt...)

Diese CSS-Fehler müssen in jedem Fall erst einmal beseitigt werden.

CSS3-Pie
Wenn die Site im IE danach immer noch so komisch aussieht, hängt das wahrscheinlich mit CSS3Pie zusammen. Du verwendest in deinem Stylesheet CSS3-Eigenschaften wie border-radius und Farbverläufe. IE8 kann diese Sachen nicht darstellen und wird via CSS3Pie und behavior dazu überredet. Das macht der interne CSS-Editor von Contao von alleine, aber in der Praxis macht das oft Probleme.

Bei der Renovierung von http://pmueller.de habe ich z. B. komplett auf den Contao-eigenen CSS-Editor gesetzt und mir damit auch CSS3Pie eingekauft, das man (leider) nicht ausstellen kann. Das Layout ist nicht besonders kompliziert: Full-Header und ein paar Farbverläufe, Schatten und runde Ecken.

Nachdem ich mit dem Layout in normalen Browsern einigermaßen zufrieden war, kommt irgendwann unweigerlich der Schritt, dem Webdesigner seit mittlerweile über 10 Jahren mit gemischten Gefühlen entgegen sehen: die Website im Internet Explorer betrachten. Früher war es der IE6, heute der IE8, und für ganz mutige der IE7.

Eine kurze Recherche auf der CSS3Pie-Website brachte auch gleich ein Ergebnis zu Tage:

• Man erstelle ein per Conditional Comment ausgeliefertes IE-Stylesheet
• In diesem Stylesheet vergebe position:relative und z-index für die jeweiligen Elternelemente

Auf http://pmueller.de waren das der Reihe nach die folgenden Elemente:

• .mod_navigation für die Navigation
• figure für die Bilder im Inhaltselement Text
• .ce_gallery für die Bildergalerien
• .ce_toplink für die TopLinks auf der Seite autor.html
• #footer für den Fußbereich

Danach sah das Layout im IE8 einigermaßen okay aus. IE7 benötigt unter Umständen noch ein paar gezielte hasLayout-Angaben zur korrekten Darstellung der Elemente.

Viel Erfolg.

[pmmueller]

damit der IE die css-Elemente auch erkennt?

Nur kurz zu den Vokabeln: "css-Elemente" gibt es nicht.

HTML hat "Elemente", die aus "Tags" bestehen und durch CSS formatiert werden. CSS kennt "Regeln" (Styles, Formatdefinitionen), die aus "Anweisungen" bestehen, die sich wiederum aus "Eigenschaften" und "Werten" zusammensetzen.