Mobile Browser erkennt Stylesheets nicht

[Sinus]

Hallo,

bin gerade dabei meine erste responsive Seite aufzubauen und habe dort ein paar merkwürdige Probleme entdeckt.

Mit der Technik bin ich soweit vertraut und bin auch begeistert, das Contao dort schon viel Unterstützung bietet. Doch nun zu meinem Problem.

Ich habe mir eine kleine Seite aufgebaut und diese Lokal betrieben, es schien so als ob alles gut funktioniert. Die Seite passte sich flexibel der Seitenlgröße an, so wie ich es eingestellt habe an. Zum Test habe ich die Seite mal hochgeladen und zuerst schien alles normal - auf dem Desktop !

Auf mobilen Browser bekam ich aber falsche Darstellungen und habe dies nur zum Teil gelöst.

1.
CSS - mittlerweile kann man im Seitentemplate externe CSS Dateien einbinden ( hervorragnedes Feature ), leider scheinen aber mobile Browser damit Schwierigkeiten zu haben !?
Ich habe zunächst für jede Darstellungvariante eine eigene CSS erstellt ( style-phone.css, style-tablet.css ), wie gesagt auf dem Desktop Pc alles prima, aber auf mobilen Browser funktioniert dies nur, wenn ich alle mediaquerys in eine CSS schreibe - und ja ich habe die Reihenfolge beachtet.

2.
Schriften einbinden - ich habe fontkits erstellt und auch hier das Problem, das auf dem Desktop alles gut läuft nur mobile Browser Schwierigkeiten haben. Hier habe ich eine eigene fonts.css eingebunden in der ich die @font-face erstellt habe und habe auch die Pfade beachtet. Ich habe dann versucht wie oben dies in eine CSS zu schreiben, dies hat aber auch nicht funktioniert, sondern erst über das CSS Framework

3.
Bilder - auf dem mobilen Firefox bekommen gewisse Grafiken farbige Kanten, auf allen anderen Browsern sieht das normal aus

Müssen noch spezielle Anpassungen vorgenommen werden ? Ich hab zb. auch keine Möglichkeit gefunden das CSS Framework zu deaktivieren. Ich finde für mich persöhnlich ist es einfach der bessere und einfachere Weg mir die Css im eigenen Editor zu erstellen. Ich finde es langsam etwas unübersichtlich ...

[Sinus]

Sorry der Beitrag kann gelöscht werden. Die Probleme sind dadurch entstanden, das in jede css mit @charset "utf-8"; /* CSS Document */ angefangen haben ... das Problem mit den Bilder ist ein reines firefox Problem, bei dem ich denke, das er obwohl no-repeat beim background eingestellt ist die Wiederholung trotzdem leicht darstellt, was bei dieser Grafik dazu fürt, das ein Rand ensteht:

anker_blog.png

und zwar oben links und unten rechts