CSS3 auch für IE mit .htc

[mantis]

Also CSS3 welches bisher noch nicht implementiert ist hat diverse nützliche Erweiterungen diese werden auch von (fast) allen modernen Browsern gerendert außer natürlich unser Freund IE, das kann man lösen indem man Fallback stylesheets nimmt oder es einfach ignoriert bis ich auf diesen .htc Hack gestoßen bin (http://css3pie.com) dieser lässt IE u.a. nützliche Sachen für den IE zu wie
border-radius, gradient, .png support, box shadow etc. nun auf anderer Software setze ich diese erfolgreich ein Aber leider bekomme ich es einfach nicht mit modified eCommerce Shopsoftware hin was ich gemacht habe ist:

die .htc Datei in den templates/xtc5/javascript geladen (ist ja im Prinzip eine js Datei dann hab ich es eingebunden mit

Code: PHP  [Auswählen]

<style type="text/css" media="screen">
.element_name { behavior:url(templates/xtc5/javascript/pie.htc); }
</style>

Soweit so gut dann bekomme ich vom IE die Meldung das der Zugriff verweigert wird trotz chmod 777

da fand ich einen Hinweis beim Ersteller das bei manchen Serverkonfigs es nötig ist die .htc über eine .php einzubinden mit dem Inhalt

Code: PHP  [Auswählen]

header( 'Content-type: text/x-component' );
include( 'pfad zu der Datei/pie.htc' );
 

aber auch diese funzt nicht hat jemand Rat würde mich freuen wenn diese Erfolgreich eingebunden werden könnte.

Gruss
mantis



Linkback: https://www.modified-shop.org/forum/index.php?topic=9410.0

[DJ-Ready]

Hmmmmmm! Sehr interessant. Werde ich mir morgen mal genauer ansehen wenn ich Zeit habe da ich auch gerne boxshadows usw. einsetze.

[mantis]

*schieb*

[DJ-Ready]

Also ich bekomme einen 403 Error wenn ichs einbaue. Muss da nochmal weiter nachforschen

[GTB]

ich habe es direkt in der CSS eingebunden hier:

Code: CSS  [Auswählen]

/* WHOLE SITE WRAPPER */
#wrap {
width:980px;
background-color:#fff;
border:#fff solid;
border-width:0 10px 10px 10px;
margin:0 auto 10px;
   border: 10px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
behavior:url('templates/xtc5/javascript/pie.htc');
}
 

damit wird ein fetter Rand um den Shop gezogen und im IE habe ich runde Ecken.

hier der Beweis:

[ Für Gäste sind keine Dateianhänge sichtbar ]

[mantis]

@GTB

also funzt es bei dir, das Problem scheint zu sein, dass der Aufruf behaviour nicht vererbbar ist d.h. er muss für jedes Element angegeben werden.

Das kann damit zu tun haben das die Effekte in VML generiert werden, aber da .js für mich ein rotes Tuch ist, ist es halt nur eine Vermutung.

Gruss
mantis

[mantis]

hab noch was gefunden, wenn das Element nicht im Template sonder z.b. im includes definiert wird muss der aufruf nicht

Code: CSS  [Auswählen]

behavior:url('templates/xtc5/javascript/pie.htc');

sondern

Code: CSS  [Auswählen]

behavior:url('/templates/xtc5/javascript/pie.htc');

bzw.

Code: CSS  [Auswählen]

behavior:url('./templates/xtc5/javascript/pie.htc');

sein

aber dann funzt es

Gruss
mantis

[h-h-h]

Wenn der gleiche Effekt auf mehrere Elemente angewendet werden soll:

Code: CSS  [Auswählen]

#content, .box1, .box2 { border-radius: 10px; behavior:url('pie.htc');}

Gruß h-h-h

[mantis]

@h-h-h

dass war schon klar, da leider der Aufruf Behviour nicht vererbbar ist sonst bräuchte man das Ganze nur dem "#wrap" oder dem "body" Tag zuzuweisen aber man hat die Problematik mit dem Aufruf also müsste das ganze 3 mal, ganz am Ende der css definiert werden, da der Pfad abhängig von der aufrufenden Seite ist, nicht der css Datei.

Etwas was mir bei Tests aufgefallen ist dass die .png opacity nicht überall greift, versuche noch herauszufinden woran das liegt

Gruss
mantis

[GTB]

mit der kommenden Version sollte das erledigt sein. Da muss der Pfad dann immer /templates heissen, da der Base Tag nicht mehr vorhanden ist.

[piru]

Hallo,

ich habe eine Frage aber war in dem falschen Thema gepostet, deswegen schreibe ich die hier, möchte keine Doppelpost machen.
ich habe die Dateien Pie.htc und Pie.js in templates/xtc5/javascript kopiert und

Code: PHP  [Auswählen]

behavior:url('templates/xtc5/javascript/Pie.htc');

in dem stylesheet.css bei .boxbody kopiert.
Wenn ich den Browser aktualisiere, sehe 1 Sekunde die abgerundete Ecken in den Boxen, und danach sehe keine Border mehr (nicht rund, nicht viereckige).

Was mache ich falsch?

Gruß
piru

[mantis]

siehe mein Post oben, der Pfad ist abhängig von der Aufrufenden Datei NICHT dem Template also muss dieser entsprechen abgeändert werden.

Zweitens wieso hast du beide Dateien eine reicht hier die .htc, es ist aber auch Möglich die js zu nutzen allerdings beißt sich dass mit modified eCommerce Shopsoftware also lieber die .htc nutzen

Gruss
mantis

[piru]

Hallo Mantis,

ich habe die pie.js gelöscht. Bleibt nur pie.htc
Mit dem pfad habe ich schon probiert, bringt aber nichts oder mache ich das falsch.
Wenn ich denke dass die aufgerufene Datei der index.html ist (wo die Boxen aufgerufen werden) mache ich den Pfad:

Code: PHP  [Auswählen]

behavior:url('javascript/PIE.htc');

Wenn ich denke dass die aufgerufene Datei in dem Ordner boxes ist dann mache ich so:

Code: PHP  [Auswählen]

behavior:url('../javascript/PIE.htc');

Bei beiden passiert nichts.
Wenn ich das mache wie ich oben geschrieben habe, dann passiert doch was, nicht was sein sollte, aber sieht so aus als der Pfad richtig wäre. Bleibt ohne border.

Gruß piru

[mantis]

@piru

also wenn du z.B dem Wrap Tag runde Ecken verpassen willst dann:
1. PIE.htc in den javascript Ordner deines Templates hoch laden
2. in der stylesheet.css Datei deines Templates die Tag Anweisung des #wrap anpassen z.B.

Code: CSS  [Auswählen]

#wrap {
        margin: 0 auto;
        width:980px;
        background-color:#fff;
        border: #fff solid;
        border-width:0px 10px 10px 10px;
        margin-bottom:10px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        behavior:url('templates/xtc5/javascript/PIE.htc');
}

Hierbei auch die Gross und Kleinschreibung der PIE.htc beachten.
So nun erst mit einem nicht IE Browser die Seite aufrufen, wenn es dort richtig anzeigt mit einem IE bzw. Triton getreibenem Browser aufrufen.

Bitte beachten der Pfad muss je nach aufrufender Datei angepasst werden - siehe vorherige Posts.

Viel Spass

P.S.: Diese Erweiterung ist eine Beta also nur mit Bedacht in einen Produktiv shop einsetzten.

Gruss
mantis

[piru]

@mantis
wenn ich die Tag des #wrap so anpasse wird der Wrap abgerundet. Und wenn ich das schon gemacht habe, werden auch die Boxes abgerundet. beide in Verbindung funktioniert (die Boxen ohne wrap geht es nicht)
Aber so brauche ich das alles.
In diesen Sinne: ein fettes DANKE
Gruß
piru