TIP: IE6-9 und CSS3

[santscho]

CSS3-Effekte (Box-Shadow, Round Corners, Gradient...) wird zur Zeit nur vom Internet Explorer 9 unterstuetzt und auch da geht es ohne umstaendlichen Extra-Code nicht.
Wie man aber mit einem ganz einfachen Mittel sogar Internet Explorer 6 den Schattenwurf (und die anderen Effekte) beibringen kann, moechte ich euch zeigen.

1. CSS3pie runterladen und auf den Server kopieren (am Besten relativ zur CSS-Datei
http://www.css3pie.com

2. Die CSS-Klasse modifizieren
(Diese CSS ist so standard und wird praktisch in jedem Browser ausser IE richtig dargestellt)

Code: Select all

.boxshadow {
	-moz-box-shadow: 1px 2px 10px #000000;
	-webkit-box-shadow: 1px 2px 10px #000000;
	box-shadow: 1px 2px 10px #000000;

Jetzt einfach noch dieses Schnippsel der Klasse beigeben:

Code: Select all

behavior: url(pie/PIE.htc);

Wobei sich der Ordner "pie" im gleichen Verzeichnis wie die CSS befindet.

So sieht die CSS dann aus:

Code: Select all

.boxshadow {
	-moz-box-shadow: 1px 2px 10px #000000;
	-webkit-box-shadow: 1px 2px 10px #000000;
	box-shadow: 1px 2px 10px #000000;
	behavior: url(pie/PIE.htc);

3. Refresh der Seite im Internet Explorer.

Detailreiche Doku und Beispiele auf der css3pie-Website
http://www.css3pie.com

[nameless1]

sounds great. thanks.

[Uwe367]

Na das klingt doch mal ganz gut. Werde das die Tage mal ausprobieren.
Danke für den Tip

[kukki]

Schon mal selber probiert? mit phpWCMS versteht sich?

Egal wie und wo Du den Ordner hinlegst und die Option

Code: Select all

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

pfadmäßig änderst, der IE rück sich kein bißchen damit.
Die Domain http://css3pie.com/ dagegen funktioniert im IE .

Könnte es sein, dass da die conf.inc.php "dazwischenmengt" Eigentlich müßte es funktionieren, aber bei mir kein wenig!

[top]

Das Problem hatte ich anfangs auch.
Vermutlich ist hier die Lösung:
http://css3pie.com/documentation/known- ... ntent-type

Mit
behavior: url(PIE.php);
hat es bei mir dann funktionuckelt.

[kukki]

Nööööö, so richtig nicht, die Sache mit der .htaccess hatte ich schon ausprobiert - hatte ich gelesen, aber keine Änderung. Dito auch nichts, wenn ich in der forntend.css PIE.php benutze passiert beim IE nichts, gar nichts.

[update]

Versuch's doch mal ohne Anführungszeichen... und gegebenenfalls mit einem vollständigen Pfad zur htc-Datei:

Code: Select all

behavior: url(/template/inc_css/pie/PIE.htc);

(und natürlich mit dem Eintrag in die .htaccess)

[kukki]

Also, ich habe folgenden Effekt gefunden (IE8 only, mehr habe ich im Moment nicht zum Testen)
Ich habe die .htaccess Eintragung wieder aktiviert


Die Website hat einen normalen background (#mainBlock).

Code: Select all

/* -------------Hauptblock ----------------------- */
#mainBlock { 
    background: url("/picture/backgr.jpg");
    height: 490px;
    margin: 0;
    overflow: auto;
    padding: 15px 10px 0;
    position: relative;
    text-align: left;
    width: auto; }

Und diese Animation wurde im IE8 gemacht, zufällig habe ich ein Refresh erzeugt (strg+F5) und sah plötzlich des "Kasten" aufblitzen. Dieser Effekt tritt aber eben nur im IE8 auf.
CP HTML:

Code: Select all

<div class="tst">das-ist-ein-Test</div>

Warum denn nur im Gottes Namen Nehme ich den Hintergrund temorär (IE: F12) für den mainBlock raus, ist der Kasten richtig zu sehen - es funktioniert doch, aber warum so komisch
Die css-Einträge:

Code: Select all

.tst{ 
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 5px 5px 5px;
-moz-box-shadow: #666 5px 5px 5px;
box-shadow: #666 5px 5px 5px;
behavior: url(/template/inc_css/pie/PIE.htc);}

[kukki]

Wenn ich das so nachlese und mir das noch einmal so anschaue, wäre das folgende vereinfachte Fallback-Lösung:

man nehme zwei Container mit verschiedenen Farben und schiebe den einen , so dass der Effekt eines Schatten entsteht.

Hier scheint die background-Fallback nicht richtig zu funktionieren, da ist veilleicht ein Fix notwendig, ich habe da schon angefragt.

[santscho]

Aber der Link zur PIE.htc scheint nicht korrekt zu sein. Oder ist die CSS bei dir tatsächlich ausserhalb des template Verzeichnis?

[kukki]

Wie oben zu sehe, da steht auch diese HTC:

Code: Select all

behavior: url(/template/inc_css/pie/PIE.htc)

[update]

Falls das verschwindende Element position:absolute im CSS haben sollte, mach's mal relative (und wenn nicht, dann auch). Und gib dem Element mal eine Füllfarbe, immer in der Kurzform:

Code: Select all

background: #cccccc url(/picture/backgr.jpg);

[kukki]

Ich habe die ganze Sache mal auf eine andere meine Spielwiesen-Seite gepackt und mit den gleichen Voraussetzungen, wie oben.
Steht kein Eintrag in der .htaccess, ist im IE8 der DIV-Container mit der Aufschrift ohne Reaktion zu sehen. Sowie alles richtig konfiguriert ist, steht die Schrift "Über" den background-color und der DIV-Bloch "unter dem background-color:

Lustig anzuschauen, wenn man im IE8 (F12) temporär diesen rausnimmt.



Die Claus'sche Veränderungformel brachte mich auf die Idee, das Objekt mit

Code: Select all

position: absolute;

zu versehen.

Tääärääääää - und sie bewegt sich doch. ABER: es gibt dann eigenwillige Reaktionen bei Srollen auf meiner Seite, also probiere ich es noch auf einer "endlos"-Website. Ich muss das noch rauskriegen, woran das liegt, allein nur "position:absolute/ relativ reicht nicht!

[santscho]

Soweit ich weiss, muss fuer die CSS property "absolute" noch eine x position und y position definiert werden. Hier eine Uebersicht:

http://www.barelyfitz.com/screencast/ht ... sitioning/

[update]

Aus der PIE-Website:

Disappearing backgrounds/borders/shadows (z-index issues)

First, a little background on how PIE renders CSS3 decorations: a single <css3-container/> element is created which holds all the VML objects. This container element is inserted as a previous sibling to the target element, and absolutely positioned at the same coordinates. If the target element is position:absolute or position:relative, then the css3-container element is given the same z-index as the target element, and since it is a previous sibling in the DOM tree it gets displayed behind, with no possibility of any other element sneaking in between.

However, this does not work so well when the target element is position:static, because static elements do not participate in z-index stacking. The only way to make our position:absolute css3 element go behind it is to give it z-index:-1. Unfortunately, this has a bad side-effect: not only will the css3 element go behind the target element, it will also go behind the background of any ancestor element(s) which are themselves position:static. This leads to situations in which PIE creates the VML rendering correctly but it disappears behind a parent element's background.

The only way I know of to work around this is to either:

make the target element position:relative, or
make the ancestor element position:relative and give it a z-index.

Both of these workarounds can have potential unwanted side-effects in terms of child element positioning and z-index stacking. PIE could easily force one or the other itself, but:

One or the other may be more appropriate depending on the particular situation, so the CSS author needs to be able to control which one gets chosen.
Forcing position:relative outside of the CSS would put IE out of sync with other browsers, leading to confusing inconsistencies.

PIE therefore does neither, and it is up to the author to implement either workaround where necessary. In most cases simply adding position:relative to the target element is fine.