CSS3Pie wird unter IE nicht angewandt

[stocki]

Hallo zusammen,

ich probiere nun seit Stunden den Fehler zu entdecken, komme aber einfach nicht drauf...

Ich möchte eigentlich nur das ein paar CSS3 Effekte (im Speziellen gehts mir um abgerundete Ecken) auch im IE angezeigt werden.

Nach langem Probieren habe ich eine komplette frische Installation von 2.10.1 auf dem Webserver mit den Music-Academy Template durchgeführt, um den Fehler lokaliseren zu können.

Unter demo.contao.org wird folgendes CSS generiert:
image003.png

Sieht dann auch im IE korrekt aus:
image004.png


Stelle ich den Fall aber jetzt unter meinem eigenen Webserver nach, wird folgendes CSS generiert:
image001.png

Das wird im IE aber nicht korrekt dargestellt (keine runden Ecken):
image002.png

Hat irgendjemand eine Idee? Ich verzweifle fast daran.

Vielen Dank im Voraus

[magicsepp]

kann ich leider nicht nachvollziehen...

[BugBuster]

Ist auf meiner Seite auch so, es wird zwar scheinbar ein css3-container generiert, aber der abgerundete Rahmen ist bei IE8 nicht sichtbar.
Hab mich aber noch nicht näher damit beschäftigt.

[pmmueller]

Hat irgendjemand eine Idee? Ich verzweifle fast daran.

Das ist es nicht wert, mit dem Verzweifeln. Denk immer dran, dass die IE8ler nicht wissen, dass die Ecken rund sein sollten

Hast du die .htaccess von Contao aktiviert? Darin steht eine Zeile bezüglich .htc-Dateien. Die ist in manchen Webhosting-Umgebungen nötig, damit der Webserver die Datei auch korrekt ausliefert. Vielleicht hat das was damit zu tun.

[NetMediaWork]

Hallo,

es sollte Breite und Höhe des Objektes angeben !

[stocki]

vielen Dank für Eure Antworten.

Des Rätsels Lösung war die htaccess datei, die aktiviert sein muss. (Danke an pmmueller)

[BugBuster]

Nehmen wir mal an, dass das mod_mime Modul im Apache nicht aktiviert ist und es auch nicht aktiviert werden kann.
Was dann?

Sehe grad, als loaded module ist mod_mime Eingetragen (phpinfo)

[BugBuster]

WTF....
Ich habs doch geschafft unter IE8 die Runden Ecken zu bekommen, wobei bei mir der ganze Rahmen fehlte.
Was mir in den Entwicklertools von IE aufgefallen war, die Farbangabe aus der border Angabe fehlte.
Alle Versuche die Farbe irgendwie wieder reinzubringen lief nicht.

Mein "Hack" funktioniert nu so, ein eigenes Stylsheet angelegt mit if lt ie 9 Angabe, und dort nur die Farbe nochmal gesetzt.
Zack, ist der Rahmen samt runden Ecken wieder da.

Haut das PIE.htc die normalen border Angaben raus, sofern border-radius Angaben existieren?

[Flex]

Hmm, spontan weiß ich da nix, aber mir fällt auf dass viele in Kombination der pie.htc immer border-color separat aufführen...
Eventuell wäre es mal einen Versuch wert?

[BugBuster]

Das fässt Contao ja wieder zusammen zu einer Regel, das war ja mein Problem.
Ne andere Idee wäre, ne weitere class/id einzubauen und diese nur bei IE zu definieren.
Nunja, so läuft es ja erstmal.

[tblumrich]

Ich hab auch Probleme mit CSS3 und der Pie Umsetzung in Contao (2.10.*)

Was ich so erlesen habe... viele Dinge funktionieren wohl nur mit der entsprechenden Kurzschreibweise der Anweisung. Im CSS Editor von Contao muss man beim Radius z.B. zwingend für alle Ecken Angaben machen, auch wenn eine Ecke garnicht rund werden soll (dann eben 0), dann wird kurzgeschrieben und dann werden auch die Ecken im IE gerundet...
Ob das jetzt speziell bei dir hilft weiß ich nicht. Beachtet man das (und das folgende) und natürlich den htaccess Tipp von Peter, habe ich eigentlich keine Probleme mit Rundungen im IE.

Was ich auch oft festgestellt habe, das es bei vielen Elementen zwingend erforderlich ist, das das Element ein position anders als der defaultwert static bekommt. Am besten als relative.

Womit ich zur Zeit Probleme habe, ist die RGBA Funktionalität im IE ab Version 8 abwärts - das klappt bei mir nicht. Gefunden habe ich diese Ticketdiskussion. So ganz schlau werde ich da aber auch nicht...
Wenn es nur um die Transparenz der Hintergrundfarbe geht, bekomme ich bei Contao aber keine Kurzschreibweise - zumindest nicht über den Editor.
Hat denn jemand bezüglich RGBA und der Transparenzumsetzung für IE8/IE7 Erfahrungen gemacht?

Gruß
Thomas

[Luminanz]

Hallo tblumrich

Ich habe heute ebenfalls festgestellt, dass die Definitionen für einen transparente Farbe, die über den Style-Sheet-Editor erstellt werden, im IE 8 nicht funktionieren -> es wird keine Farbe angezeigt.
Dies verhält sich gleichermassen bei Rahmen und Hintergrund.

Leider habe ich bislang keine Lösung gefunden, kann das Problem aber bestätigen

Viele Grüsse

[tblumrich]

Danke für deine Rückmeldung.
Das ist natürlich sehr schade, wenn die Transparenzfunktion nicht umgesetzt wird... IE8 und 7 sind ja nun doch noch sehr verbreitet. Bei Setzung einer Hintergundfarbe im RGBA Stil wird das CSSPIE Script scheinbar nicht mitgeladen...

Nun gut, in diesem Fall kann man sich etwas behelfen mit einem entsprechend transparenten PNG. Funktioniert zwar auch nicht ausnahmslos... aber immerhin.

Gruß
Thomas

[pmmueller]

Auf css3pie.com steht, was PIE ("progressive internet explorer") alles kann:

PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

In addition, PIE adds support for border-image and linear-gradient to IE 9, which already supports the other features natively.

Transparenzen tauchen da nicht auf...

[tblumrich]

Hi Peter.

Nunja, das kann ich mir eigentlich kaum vorstellen, dass Leo in die neue Version ein Feature einbaut, welches bei sehr weit verbreiteten Browsern nicht nutzbar ist... das der IE6 nicht weiter unterstützt wird, wurde ja klar propagiert.
Zumal es ja scheinbar doch funktioniert wie Andreas Schempp in seinem Link (Footer-DIV) zeigt oder auch die folgende Seite:
http://www.electrictoolbox.com/opaci...-transparency/

Irgendwo wird da das nötige -pie-background); und das HTC File selber nicht geladen. Und zwar wenn background-color); benutzt wird... leider bekomme ich das bei manueller Eingabe der Kurzschreibweise auch nicht hin.
//edit
Auf einer anderen Seite habe ich das jetzt mit manueller Eingabe der Kurzschreibweise hinbekommen (für halbtransparentes Weiß):

background:rgba(255,255,255,0.5);
-pie-background:rgba(255,255,255,0.5);
behavior:url("plugins/css3pie/PIE.htc");

Seltsam. Fakt ist aber, das man manuell nachhelfen muss.

Gruß
Thomas

[pmmueller]

Du hast Recht. Da habe ich wohl ein bisschen zu früh aufgehört zu lesen:

RGBA Color Values. PIE parses RGBA color values wherever they are allowed. However it is only able to successfully render their opacity value in a few contexts. In all other contexts they will be rendered with the correct RGB color, but fully opaque. Here are the supported contexts in which the opacity will be rendered correctly:

• The solid background-color as specified in the -pie-background property.
• The color value of box-shadow, if the shadow has no blur.
• Color stops in linear-gradient, for IE 9 only (will be rendered fully opaque in IE 6-8)

Es sollte also wohl doch möglich sein.

Ich muss ehrlich sagen, dass ich mir nicht sonderlich viel Mühe gebe, IE7 und IE8 bezüglich CSS3 zu dressieren. Im Sinne von "progressive enhancement" finde ich das völlig in Ordnung, wenn die eckige Ecken und deckende Farben darstellen, solange die Zugänglichkeit des Inhalts nicht beeinträchtigt wird. Wenn es einfach geht und funktioniert, wunderbar, aber wenn ich erst manuell nachhelfen muss, würde ich es wahrscheinlich nicht tun.

[tblumrich]

Ich muss ehrlich sagen, dass ich mir nicht sonderlich viel Mühe gebe, IE7 und IE8 bezüglich CSS3 zu dressieren. Im Sinne von "progressive enhancement" finde ich das völlig in Ordnung, wenn die eckige Ecken und deckende Farben darstellen, solange die Zugänglichkeit des Inhalts nicht beeinträchtigt wird. Wenn es einfach geht und funktioniert, wunderbar, aber wenn ich erst manuell nachhelfen muss, würde ich es wahrscheinlich nicht tun.

Das sehe ich im Prinzip wie du... viel Arbeit stecke ich da auch nicht rein. Und letztendlich ist die Geschichte kaum so wichtig wie der Thread hier selbst. Aber in diesem Fall wird aus dem halbtransparenten Hintergrund in IE8 halt gar keiner bzw. komplett transparent - und das kann u.U. schon seltsam aussehen bzw. zur Unleserlichkeit führen.
Ich wollte es halt nur erwähnen (vielleicht läßt sich das ja irgendwo für die Zukunft beheben).

Behelfen kann ich mir natürlich, auch mit vertretbarem Aufwand.

Gruß
Thomas

[pmmueller]

Meine Anmerkung war nicht als Kritik an deiner Vorgehensweise gemeint. Ich finde das schon gut, das zu erfahren, und bei Gelegenheit werde ich das auch mal checken, aber eher so "low priority". Also wahrscheinlich kommt das erst dran, wenn es den IE8 eh nicht mehr gibt

[dermitdemhasentanzt]

Ich hab mit minimalen Änderungen in der StyleSheet.php Zeile 477 folgendes eingefügt...

$return .= $lb . '-pie-background:' . $this->compileColor($bgColor, $blnWriteToFile, $vars) . ';';
$return .= $lb . 'behavior:url("plugins/css3pie/PIE.htc");';

Könnte man das nicht einfach in ein Modul umbasteln oder so? Weil nicht updatesicher...
Bin grad dabei mir sämtlicher Sachen, die nicht funzen von Hand in die StyleSheet zu bauen... Gibt noch diverse Probleme mit Border-Shadow... Da wird im IE fälschlicherweise die komplette Fläche unterlegt und somit gibt es Probleme mit transparenten Hintergründen....

[tblumrich]

Könnte man das nicht einfach in ein Modul umbasteln oder so? Weil nicht updatesicher...
Bin grad dabei mir sämtlicher Sachen, die nicht funzen von Hand in die StyleSheet zu bauen... Gibt noch diverse Probleme mit Border-Shadow... Da wird im IE fälschlicherweise die komplette Fläche unterlegt und somit gibt es Probleme mit transparenten Hintergründen....

*grml*
Jop, auch das kann ich leider auch bestätigen, grade bemerkt. Da muss ich auch nochmal ran.

Gruß
Thomas