Patrick 123: Das Problem mit den Schatten

Beitrag lesen

Hallo Leute,
ich habe folgendes Problem:
ich würde um ein bild gern einen weichen schlagschatten legen und suche dafür einen code der auf älteren und neueren browsern funktioniert.
Der CSS3 Boxshadow (box-shadow:3px 3px 10px #333333) wird z.b. bei IE und anderen nicht angezeigt.

Folgenden Code habe ich gefunden, funktioniert auch aber gibt es da nicht etwas kürzeres? ist doch schon sehr umständlich...vielen dank für eure hilfe!
Patrick

im CSS:

DIV.shadow, DIV.shadow2, DIV.shadow3, DIV.shadow4, DIV.shadow5 {
   padding: 1px;
   border-radius: 10px;
   -moz-border-radius: 10px;
   }
DIV.shadow5:hover DIV.shadow,
DIV.shadow5:hover DIV.shadow2,
DIV.shadow5:hover DIV.shadow3,
DIV.shadow5:hover DIV.shadow4,
DIV.shadow5:hover {
   padding: 0;
   border-radius: 5px;
   -moz-border-radius: 5px;
   }
DIV.shadow {
   background-color: #8e8e8e;
   border: 1px solid #959595;
   margin: 0px;
   }
DIV.shadow2 {
   background-color: #aaa;
   border: 1px solid #bebebe;
   margin: 0;
   }
DIV.shadow3 {
   background-color: #d1d1d1;
   border: 1px solid #e1e1e1;
   margin: 0;
   }
DIV.shadow4 {
   background-color: #ededed;
   border: 1px solid #f6f6f6;
   margin: 0;
   }
DIV.shadow5 {
   float: left;
   background-color: #fcfcfc;
   border: 1px solid transparent;
   margin: 10px 14px;
   }
DIV.shadow5:hover {
   border-width: 5px;
   }

DIV.shadow5 IMG {
   border: 0px solid #666;
   margin: -2px;
   display:block;
   position: relative;
   top: -3px;
   left: -3px;
   -moz-opacity:0.67;
   }
DIV.shadow5:hover IMG {
   margin: -1px;
   top: -1px;
   left: -1px;
   -moz-opacity:1;
   }

IM HTML-Body:

<div class="shadow5"><div
 class="shadow4"><div
 class="shadow3"><div
 class="shadow2">
  <div
 class="shadow"><img class="bilder"src="BILD.jpg" width="200" height="200" />
  </div></div></div></div></div>