css drop shadow

[chronister]

Hi folks,

 

I need a little assistance getting this css only drop shadow to apply to my image.

 

I am trying to place a drop shadow on my image, and since the background color is not finalized yet, I don't want to do it in photoshop(my preference for drop shadows.) and because transparent gif's don't do well with drop shadows I am trying to get this pure css solution to work.

 

Here is the code

<div id="shadow-container">  
         <div class="shadow1">  
             <div class="shadow2">  
                 <div class="shadow3">  
                     <div class="container">  
                      <a href="/birthday.php" >
  	<img src="/includes/photos/1015.jpg" alt="Happy Joe's Stories" align="left" border="0" hspace="10" vspace="10" width="450" /></a>   
                     </div>  
                 </div>  
             </div>  
         </div>  
    </div> 

 

the css

 

#shadow-container {  
     position: relative;  
     left: 3px;  
     top: 3px;  
     margin-right: 3px;  
     margin-bottom: 3px;  
}  
   
#shadow-container .shadow2,  
#shadow-container .shadow3,  
#shadow-container .container {  
     position: relative;  
     left: -1px;  
     top: -1px;  
}  
   
     #shadow-container .shadow1 {  
         background: #F1F0F1;  
     }  
   
     #shadow-container .shadow2 {  
         background: #DBDADB;  
     }  
   
     #shadow-container .shadow3 {  
         background: #B8B6B8;  
     }  
 #shadow-container .container {  
         background: #ffffff;  
         border: 1px solid #848284;  
         padding: 10px;  
    }

 

The page in question is..  http://home.happyjoes.net/about/stories.php

 

I am in the process of redoing the site so it is a work in progress. As you can see, the div box is appearing above the image rather than being applied to the image.

 

Any help is appreciated.

 

Thanks,

 

Nate

[king arthur]

Usually when stuff like that happens it means you've got a missing closing tag somewhere, but I wouldn't like to say where.

[chronister]

I have 5 opening div tags and 5 closing tags. My a tag is properly surrounding the img tag. I thought that too and checked it before I posted here. So that is not the issue.

 

Anyone else? Thanks in advance for the help. I am fairly css challenged.

 

Thanks,

 

Nate