CSS3PIE: Problem mit IE 8 in Contao 2.11.4

[Anguel]

Hallo,

ich arbeite mit dem internen CSS Editor. Dieser erzeugt als Pfad zu CSS3PIE

plugins/css3pie/PIE.htc

leider funktioniert das nicht mit dem IE8. Ich arbeite auf localhost.
Wenn ich in der erzeugten .css Datei jedoch den Pfad zu

../../plugins/css3pie/PIE.htc

ändere, scheint alles gut zu klappen.
Ist das ein Bug?

Grüße
Anguel

[tblumrich]

Hi.

Such mal etwas im Forum... das Problem wurde/wird hier schon 1-2 mal behandelt...

Gruß
Thomas

[Anguel]

Hi.

Such mal etwas im Forum... das Problem wurde/wird hier schon 1-2 mal behandelt...

Habe ich gemacht, aber angeblich wurde der Bug in 2.11.2 beseitigt... Vor allem verstehe ich nicht, warum es funktioniert, sobald ich den Pfad ändere.

[Anguel]

Ich habe mal die Testseite auf einen Server hochgeladen:
http://contaodevelop.stankov.de/index.php/lasers.html

Ich blicke da mittlerweile gar nicht mehr durch, weil im Gegensatz zur localhost Version nun die Links in der Navigation auf der linken Seite zumindest beim hovern im IE8 reagieren, auch wenn sie keine abgerundeten Ecken aufweisen. Dafür ist aber in der Server-Version der Farbverlauf im Footer nicht sichtbar, währen dieser auf localhost zu sehen ist

[ruedische]

Dass der Bug wirklich behoben wurde, glaube ich auch nicht. Der interne CSS-Editor (noch schlimmer die Erweiterung csseditor) zerhaut einem gerne mal beim Speichern komplexere CSS3-Anweisungen, wenn das PIE.htc eingebunden wird. Ich würde dir empfehlen, mal alle CSS3-Formatierungen in eine externe Datei auszulagern. Der Pfad zur PIE.htc muss immer(!), egal, wo deine externe CSS-Datei liegt "'plugins/css3pie/PIE.htc' lauten - der IE braucht das so, er rechnet relativ von der HTML- bzw. index.php-Datei aus, nicht vom Stylesheet-Ort. Und die behavior-Anweisung muss immer am Ende stehen (und nur einmal pro Selektor), also z.B. so:

#wrapper {
    background-color:#fff;
    -moz-border-radius:16px;
    -webkit-border-radius:16px;
    border-radius:16px;
    -moz-box-shadow:5px 10px 30px #707173;
    -webkit-box-shadow:5px 10px 30px #707173;
    box-shadow:5px 10px 30px #707173;
    behavior:url('plugins/css3pie/PIE.htc');
}

Ich mach das jetzt immer mit externem Stylesheet - klappt garantiert, da wette ich mit dir. (Auch in 2.11.4.)

[Anguel]

ruedische, danke für die gute Erklärung. Die Pfadangaben scheinen also doch richtig zu sein. Tatsächlich sieht aber der generierte CSS Code ziemlich durcheinandergewürfelt aus. Werde mal morgen testen, ob eine Umstellung etwas bringt.

Habe gerade auch gelesen, dass dieses CSS3PIE ziemlich pingelig ist. Überlege, ob es nicht evtl. auch etwas mit dem blöden z-index zu tun haben könnte:
http://css3pie.com/documentation/known-issues/#z-index

Hatte mich schon an den internen Contao CSS Editor gewöhnt, aber alles per Texteditor ist wohl auch in 2012 die sicherste Methode...

Danke nochmals für die Hilfe!

Grüße
Anguel

[Anguel]

Also ich habe jetzt mal den von Contao generierten CSS Code umformatiert, so dass die behavior Anweisung immer als letztes steht. Hat aber nichts gebracht, da die runden Ecken etc. immer noch nicht sichtbar sind. Ich wüsste sonst nicht, was da Contao falsch machen könnte...

Hier ist nochmal die von mir umformatierte CSS Datei:
http://contaodevelop.stankov.de/syst...b381b7fcad.css

Ich komme nicht weiter :-(

[ruedische]

Da fehlt teilweise ein Semikolon in der Zeile behavior (der IE will das wohl haben):

behavior:url('plugins/css3pie/PIE.htc');

Bau's besser extern, Contao komprimiert den Code beim Speichern. Ich hatte schon Fälle, wo "behavior" zweimal und an falschen Stellen im Code stand.

Gruß
R.

[ruedische]

Hi, ich habe vorhin mal dein Layout aufgedröselt und ein externes Stylesheet für die CSS3-Anweisungen angelegt. Das funktioniert auch. Allerdings musst du für den IE aufpassen, wo du Hintergrundfarben definierst. Dein Wrapper hat z.B. eine Hintergundfarbe. Darum kriegst du im Footer nicht den Farbverlauf im IE angezeigt, selbst wenn du dem Footer eine Hintergundfarbe zuweist. Anscheinend hat das PIE.htc Probleme mit der Kaskadierung. Background-Farben dürfen (für den IE) also nur in den jeweiligen Containern selber definiert werden und nicht in den Parents. - Am besten das Layout schrittweise aufbauen und jeden Schritt im IE testen, dann klappt's. - Oder im IE (8) ganz auf Gradienten und Schatten, runde Ecken etc. verzichten ;-)

[Anguel]

ruedische, vielen Dank, dass Du Dir die Mühe gemacht hast und dass Du die Probleme lokalisiert hast! Ich bin kein CSS Experte und solche Ungereimtheiten machen mich echt verrückt.

Am besten das Layout schrittweise aufbauen und jeden Schritt im IE testen, dann klappt's. - Oder im IE (8) ganz auf Gradienten und Schatten, runde Ecken etc. verzichten ;-)

Microsoft hat sich da echt was geleistet, dass für Win XP kein IE 9 kommt... Ich werde wahrscheinlich tatsächlich das CSS3PIE nicht nutzen. Schade, dass es in Contao keine Option zum Abschalten dieses buganfälligen Addons gibt. Da werde ich mal alles schön per Hand codieren. Danke nochmals!

[Anguel]

Also, ich habe jetzt IE 7 und IE 8 doch noch dazu bewegt, die abgerundeten Ecken anzuzeigen. Es war wie von mir zuvor vermutet ein z-index Problem, das durch hinzufügen von position:relative zu allen Elementen mit pie behavior gelöst werden konnte: http://css3pie.com/documentation/known-issues/#z-index

Leider führte das Ganze zu zusätzlichen Verschiebungen im Layout im IE 7 und vollkommen verschwundene Links im IE 6, so dass ich doch auf die netten Effekte verzichten muss :-(

[fusch]

Hallo liebes Forum,

ich arbeite schon länger mit PIE (auch ausserhalb von Contao) und finde es ganz brauchbar.

Auch wenn der Thread schon ein bißchen älter ist, vielleicht nützt es noch jemandem:

Die meisten Probleme dieser Art lassen sich durch ein schlichtes position:relative lösen. Auf der css3pie-Seite wird dieser Hinweis auch gegeben.

Viele Grüße,
fusch