Darstellungsproblem von CSS beim IE (IE9 und weitere)
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
Liste der Anhänge anzeigen (Anzahl: 1)
und so sollte es in etwa aussehen!
Site im IE nicht gut: CSS-Validator und CSS3Pie
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.
