WP und PIE - CSS3 für Internet Explorer

Hallo,

hat jemand schon mal "CSS3 PIE" - http://css3pie.com/ - in Wordpress eingesetzt?
Ich möchte einigen meiner (selbstdefinierten) Boxen runde Ecken und Schatten geben. Da gibts diverse Lösungen für - aber mit zerpflückten Grafiken oder jQuery wollte ich nicht unbedingt anfangen.
Mit CSS pur kommt man sogar recht weit, z.B. für runde Ecken:

-webkit-border-radius: 8px; /* für Safari und Chrome */
-moz-border-radius: 8px; /* Firefox */
border-radius: 8px; /* CSS3-Standard */

Der IE bleibt allerdings wie so oft außen vor ;-)
Der IE9 soll es dann können - aber die Kunden wollen JETZT runde Ecken...
Beim Recherchieren stiess ich auf ein hoffnungsvolles Projekt namens "PIE" - http://css3pie.com -, welches zahlreiche CSS3-Features auch im IE6 bis IE8 verfügbar macht. Dazu wird in die entspr. CSS-Definition einfach als letzte Anweisung eine .htc-Datei (vorher von obiger URL downloaden!) eingebunden, mit

behavior: url(PIE.htc);

Soweit so gut. Wenn ich das mit einem "normalen" HTML-Dokument auf dem gleichen Web-Server, ohne Wordpress mache, funktioniert im Internet Explorer 8 alles prächtig! Nun habe ich aber Wordpress. Diversen Foren entnahm ich, dass bei WP-Installationen die PIE.htc Datei in die DocumentRoot kopiert werden muss -> habe ich so gemacht. Dennoch funktioniert das PIE (runde Ecken) nicht. Der IE zeigt die Box in Ihren Abmessungen richtig an, aber die Ecken und der Schatten fehlen!
Also gegoogelt und in diversen Foren umgesehen. Der dort oft vorgefundene Tipp von Gordon Brandner
http://gordonbrander.com/blog/2010/08/0…-with-pie-pt-1/
half bei mir allerdings auch nicht - die Boxen bleiben im IE ohne Ecken und Schatten (in FF, Chrom usw. alles paletti)
Ich denke, die PIE.htc ist richtig eingebunden, denn ich habe mal ein JS-alert-Statement in die PIE.htc eingebaut und dieses wird beim Neuladen der Seite angezeigt! Also findet er die htc-Datei - daran liegt es also definitiv nicht!
Ich vermute, das Wordpress die PIE.htc einfach nicht korrekt handelt.
Aber wo/wie bringe ich das WP bei?
Die PIE.htc liest ja die DOM des Dokuments per JS komplett ein,
und filtert dann entsprechende Objekte raus, die solche CSS3-Statements enthalten. Für diese werden dann spezielle Formatierungen (dynamisch) per JS aufgerufen, so dass halt zum Beispiel die Ecken rund und die Boxen schattiert werden :-)
Genau das scheint aber nicht zu klappen!?!?!
Evtl. hat das jemand bei sich im Einsatz und kann helfen?
Und wie gesagt an irgendwelchen Browser-Einstellungen kann es nicht liegen - ein Dokument mit PIE, aber OHNE Wordpress funktioniert.

Sorry, dass ich mit keiner URL dienen kann - habe deswegen versucht das Problem möglichst detailliert zu beschreiben.

Stefanie

Danke für die Antwort;
aber ich habe (mehrfach) gelesen, dass sich bei behavior: die relative URL-Angabe für die PIE.htc eben nicht auf die Style-Sheet Datei, sondern auf die HTML-Datei bezieht, die das Style Sheet einbindet. Nun gibt es ja bei WP keine HTML-Dokumente in diesem Sinne. Jedenfalls wenn ich diese URL-Angabe so verwende, die PIE.htc in meine DocumentRoot kopiere und in die PIE.htc ein JavaScript-alert() einbaue, dann geht beim Dokument-Reload ein solches alert-Fenster auf! Also wird doch die PIE.htc angesprochen! Ich habe bewusst die PIE.htc auch woanders hinkopiert, und dabei kam dieses alert nie!
Oder muss die PIE.htc aus irgendwelchen Gründen doch in demselben Verzeichnis wie das Style Sheet stehen? Das würde aber dem oben Gesagten widersprechen...
Irgendwie ist mir das Zusammenwirken Web-Dok. - Style Sheet - htc-Datei noch schleierhaft =:-{

Stefanie

Hallo telecommander,

interessante Variante, die ich tatsächlich noch nicht getestet habe :razz:
Hatte auch schon vollst. URLs probiert, also mit "http://mein-server.de/bla/.../themefolder/PIE.htc - brachte aber nichts.
Also ich teste das morgen früh (Server zurzeit down) und melde mich,

Stefanie

Hallo,

habe den Test absolviert! Hat aber leider nichts gebracht :sad:
Vermutlich ist die Ursache ganz simpel, aber ich komme halt nicht drauf...
Hier der aktuelle Stand:
Ich benutze das twentyten-Theme. Also habe ich die PIE.htc in den Ordner .../wp-content/themes/twentyten/ kopiert; im gleichen Ordner liegt die style.css für das Theme. In die style.css habe ich folgendes in den Teil
/* Main global 'theme' ... */ eingefügt:

.pie-box {
  border: 1px solid #696;
  padding: 60px;
  text-align: center;
  width: 200px;
  background: #00AEEF;
  border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  behavior: url(/PIE.htc);

In einer (statischen) Seite binde ich die Klasse .pie-box in der "HTML-Ansicht" wie folgt ein:

<div class="pie-box">
  Diese Box hat runde Ecken!
</div>

Effekt: Die Box wird mit der richtigen Breite, Hintergrundfarbe usw. richtig angezeigt, also stimmt auch die Klasse. Aber die runden Ecken fehlen halt!!!

Füge ich ein Javascript-alert in die PIE.htc ein, wird dieses nicht ausgeführt.
Kopiere ich aber die PIE.htc in die DocumentRoot meines Web-Servers und binde sie mit behavior(PIE.htc) (also ohne führenden Slash!) ein, dann wird immerhin das JS-alert ausgeführt!! Aber die runden Ecken erscheinen trotzdem nicht!

Ich hoffe, es hat noch jemand einen Tipp...
Am Ende ist es wirklich ein ganz simples Konfig.-Problem.

Stefanie

.htc funzt nicht im IE, mit WP

Hallo again,

da mich so "unerledigte" Threads woanders immer nerven, hier noch eine - wenn auch negative - Abschlussnotiz zu meiner Ausgangsfrage.
Dieses PIE.htc Goodie klappt wirklich nur ohne Wordpress, ganz egal wie man die PIE.htc einbindet. Habe wirklich genug Zeit und Nerven für Tests investiert. Wer anderer Meinung ist, beweise mir das Gegenteil, aber bitte mit URL-Angabe :-D
Habe jetzt eine reine CSS2-Lösung genommen, die zwar nicht ganz so schick, aber trotzdem akzeptabel daherkommt.

Stefanie

Na dann leg mal los 8-)

Ja, vllt. schau ich mir das morgen an und starte einen (allerletzten) Versuch.
Danke jedenfalls!

Stefanie

immerhin: Fehlerausschriften

Hi,
ich mal wieder.
Habe jetzt mal die JavaScript Fehler Console eingeschaltet.
Die PIE.htc steht in der DocumentRoot und wird in der styles.css wie schon mal gezeigt so eingebunden:

behavior: url(/PIE.css);

Immerhin findet er die PIE.htc; denn beim Reload der Seite meldet sich nun JavaScript:

Zitat

Die Webseite enthält Fehler und funktioniert möglicherweise nicht....
Ungültiges Argument.
PIE.htc Zeile: 23
Code: 0 Zeichen: 399
URI: http://localhost/PIE.htc

Objekt erwartet
PIE.htc Zeile: 73
Code: 0 Zeichen: 60
URI: http://localhost/PIE.htc

Alles anzeigen

Ja und beim Wegklicken der Nachricht kriege ich meine altbekannte Seite, natürlich ohne die runden Ecken an der Box :-x
Also ich schwöre hoch und heilig, dieses PIE-Paket richtig runtergeladen (Vers. 1.0beta2), ausgepackt und die drei Dateien nach DocumentRoot kopiert zu haben; soviel kann man also nicht verkehrt machen; was ist da immer noch falsch??? Wie soll man in diesem Wust in der PIE.htc die Zeilen 23 und 73 finden, und was gibts da überhaupt zu meckern???

Was in der styles.css steht, hatte ich schon weiter vorn mal geschrieben. Daran wirds sicher nicht liegen.

Also Männer, habt ihr noch einen (oder mehr :wink:) Tipps, ansonsten lass ich das jetzt mit diesen Boxen, das soll ja auch halbwegs effektiv bleiben...

Thanx
Stefanie

Sorry, es steht natürlich folgendes in der styles.css:

behavior: url(/PIE.htc);

Und ich nutze:
WP 3.0
Theme twentyten

Stef

Hallo telekommander,

Deinen Test
http://lokalnetz.com/wp-pie-box-test/
habe ich gesehen :-D

und da ich immer noch nicht aufgebe, schicke mir doch bitte mal die style.css oder halt den entscheidenden Teil davon wo das behavior und alles, was dazu gehört, drin steht.

Irgendein klitzekleines Detail stellt sich hier noch quer!
Muss man eigentlich noch irgendwo javascript anknipsen oder so was??

Stefanie

Anwesend?

Hallo telekommander,

falls Du noch "wach" bist, antworte doch bitte auf meine letzten Fragen.

Stefanie

Gelöst!

Hi,

habe mich heute noch mal dem PIE-Problem gewidmet und nachdem ich die
PIE.htc ins Wurzelverzeichnis der WP-Installation geschoben hatte und diese in der style.css einfach mit

behavior: url(PIE.htc);

eingebunden hatte, funktionierte alles :grin: !
Dasselbe gilt für die PIE.htc im übergeordneten Verzeichnis - muss dann mit

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

eingebunden werden.
Danke nochmal für Eure Anregungen, ... !!

Stefanie