Box Shadow - Problem bei Internet explorer

[helmet_9]

Hallo Forum,

ich hoffe, mir kann jemand einen Tip geben.. z.B auf ein gutes Tutorial zum Thema Schatteneffekte.

Also ich habe folgenden html code:

  
<div class="box1">  
  <div class="bild">  
  <img src="">  
  </div>  
  <div class="text">  
  <p>text..</p>  
  </p>  
  </div>  
  </div>  

Nun möchte ich, dass um Alles also um box1 ein shadow gelegt wird.
Ich benutze dafür untenstehenden CSS.
Mein Problem ist, dass der IE den Schatteneffekt um alles noch mal extra anwendet.. Jedes in box1 enthaltene Div hat dann einen eigenen Schatten und sogar selbst der Text hat einen Schatteneffekt. So als ob der das auf jedes Child-elemnt vererbt.

  
  
.box1  {  
-moz-box-shadow:    3px 3px 5px 6px #ececec;  
-webkit-box-shadow: 3px 3px 5px 6px #ececec;  
box-shadow:         3px 3px 5px 6px #ececec;  
zoom: 1;  
  
/* For IE 8 */  
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";  
/* For IE 5.5 - 7 */  
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');  
  
border:1px solid #ececec;  
height: 15em;  
  
	width: 28.86em;  
	float:left;  
	clear:none;  
}  
/* das habe ich versucht um das "vererben" des Schatteneffekts zu unterbinden: */  
.box1 div.bild , .box1 div.bild img ,  
.box1 div.text , .box1 div.text p{  
	filter:none;  
	-ms-filter:none;  
}  
  

[niklaskamenisch]

hi,

probier es doch einfach sinngemäß mit so:

.box1 * {
-moz-box-shadow: none;
...
...
}

das * musst du mit deinem direkten element ersetzen.
Damit überschreibst du eventuelle vererbungen. (vermutlich div?)

Gruß Niklas

[helmet_9]

seltsam.. beide Lösungsansätze funktionieren nicht.. ich habe immer noch die innenliegenden Divs und Texte mit Schatten
Vielen Dank für Eure Mühe!!

  
  
.box1 div.bild , .box1 div.bild img ,  
.box1 div.text , .box1 div.text p{  
	filter:none;  
	-ms-filter:none;  
	filter:progid:DXImageTransform.Microsoft.Shadow(enabled=false);  
  
	progid:DXImageTransform.Microsoft.Shadow(enabled=false);  
	  
/* noch mal ... */  
-moz-box-shadow: none;  
-webkit-box-shadow:none;  
box-shadow: none;  
filter:none;  
	-ms-filter:none;  
  
  
}  
  
  

hi,

probier es doch einfach sinngemäß mit so:

.box1 * {
-moz-box-shadow: none;
...
...
}

das * musst du mit deinem direkten element ersetzen.
Damit überschreibst du eventuelle vererbungen. (vermutlich div?)

Gruß Niklas

[Hansmar]

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

Mein Problem ist, dass der IE den Schatteneffekt um alles noch mal extra anwendet.. Jedes in box1 enthaltene Div hat dann einen eigenen Schatten und sogar selbst der Text hat einen Schatteneffekt. So als ob der das auf jedes Child-elemnt vererbt.

Die Eigenschaft soll laut Microsoft angeblich nicht vererbt werden, aber naja – IE halt …

/* das habe ich versucht um das "vererben" des Schatteneffekts zu unterbinden: */
.box1 div.bild , .box1 div.bild img ,
.box1 div.text , .box1 div.text p{
filter:none;
-ms-filter:none;

Probier's doch mal ganz trickreich mit "progid:DXImageTransform.Microsoft.Shadow(enabled=false)".

Oder hau' den filter-Scheiss gleich in die Tonne. Wegen eines fehlenden Schattens bricht sich niemand einen Zacken aus der Krone und der IE 9 soll mit box-shadow umgehen können.

[Gunnar Bittersmann]

@@helmet_9:

nuqneH

Mein Problem ist, dass der IE den Schatteneffekt um alles noch mal extra anwendet.. Jedes in box1 enthaltene Div hat dann einen eigenen Schatten

Nö, das kann ich nicht nachvollziehen.

und sogar selbst der Text hat einen Schatteneffekt.

Das allerdings. Works as designed.

Dagegen hilft, der Box eine Hintergrundfarbe zu geben.

Qapla'