Mehrere IE-Filter in einer Anweisung

[Sprint]

Hallo,

durch ein völlig anderes Problem bin ich darauf gestoßen, daß der IE scheinbar nicht mehrere Filter in einer Anweisung verarbeiten kann. In diesem Beispiel wird entweder der Schatten, oder der Verlauf oder die abgerundeten Ecken ausgeführt. Werden mehrere Filter angegeben, wird nur noch der Verlauf ausgeführt.

.teaserbox { 
   color:black; 
   text-align: center; 
   width: 170px; height: 175px; 
   z-index:1; 
   float: left; 
   margin-right: 30px; margin-bottom: 35px; 
   border: solid 1px #c50419; 
   -webkit-border-radius: 6px; 
   -moz-border-radius: 6px; 
   border-radius: 6px;   
   behavior: url(/border-radius.htc);
   -moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
   -webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
   filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
   background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */
   background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */
   filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}

Gibt es eine Möglichkeit, das doch noch hinzubiegen? Ich habe keine Lust, extra für den sch... IE mehrere div's zu verschachteln, sofern das überhaupt was helfen würde. Den Verlauf könnte man ja noch mit einem Bild umgehen, aber die anderen beiden?

 

[Maik]

Hi,

vielleicht ist es hier hilfreich, die IE-Filter aus dem Regelblock herauszunehmen, der jeweiligen IE-Version entsprechend in ein seperates Stylesheet (CSS-Datei) auszulagern, und dieses ihnen im (X)HTML-Dokumentheader per "Conditional Comments" (siehe http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative) zuzuführen.

mfg Maik

 

[Maik]

Es gibt auch eine offizielle Referenz von Microsoft: Introduction to Filters and Transitions

Demnach werden zumindest schon mal mehrere Filter-Typen in einer filter-Regel zusammengefaßt.

Aus:

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
   [...]
filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */

wird:

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3)
         progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */

mfg Maik

 

[Sprint]

Es gibt auch eine offizielle Referenz von Microsoft: Introduction to Filters and Transitions

Hm, warum wundert es mich eigentlich nicht, daß die Seite nicht richtig funktioniert? Sowohl im IE 7 als auch im 8er wird ein Scriptfehler angezeigt und bei einem Klick auf die Beispiele passiert gar nichts. Aber zum Glück braucht man die ja nicht unbedingt.

Schatten und Verlauf ließen sich damit auch verbinden, aber die runden Ecken über die htc Datei machen das wieder alles zunichte. Also entweder Filter oder behavior. Auch zusammen mit nur einem Filter funktioniert es nicht. Damit würde aber selbst eine Verschachtelung nicht funktionieren, da der Schatten ja an den Rahmen gebunden ist.

 

[Maik]

Hm, warum wundert es mich eigentlich nicht, daß die Seite nicht richtig funktioniert? Sowohl im IE 7 als auch im 8er wird ein Scriptfehler angezeigt und bei einem Klick auf die Beispiele passiert gar nichts.

Deine allgemein formulierte Aussage trifft bei mir so in keinster Weise zu.

In der Referenzseite wird mir kein Sriptfehler gemeldet, und was ich aus den einzelnen Beispielen jetzt stichprobenartig ausgewählt habe, funktioniert im IE erwartungsgemäß einwandfrei.

mfg Maik