HTML/CSS Design Problem

[iWhat]

I took one class of HTML just for the heck of it a couple of years ago. I have pretty much retained most of it, but I still run into a few conundrums every once in a while. And I was also quickly introduced to CSS during that class. So I'm try to take advantage of CSS, since it seems to be the way to fix a website on the fly and improve upon a website. So I'm stumbling my way through it at the moment.

I've made a table and have inserted my images that I made in Photoshop. The images made it into the cells fine. But the cells are not proportioned correctly. On the second row, the left image repeats all the way to the other end of the table and pushes the center cell and the right cell out of the table. I'm sure I'm just forgetting something stupid, but I have googled and googled for help and have yet to come to a happy ending. I did think that it I needed to add colspan of 3 and repeat-y in, but that didn't do it. Visibly, it's very clear what is wrong, so it should be a quick fix, I'm sure.

Download the zip file, which I have attached to this thread. You can either tell me what to insert into the file or upload the zip file back to the thread.

Any help would be very appreciated and rewarded!

 

[mynameis]

<table class="shadow" border="0" 
    cellspacing="0" cellpadding="0" align="center">  
  <tr>
    <td class="shadow-top" colspan="3"></td>
  </tr>
   <tr>
     <td class="shadow-left"> &nbsp</td>
     <td class="shadow-center"> &nbsp</td>
     <td class="shadow-right">&nbsp </td>   
   </tr>
   <tr>
     <td class="shadow-bottom" colspan="3"></td>
   </tr>
</table>

That works

 

[mynameis]

Also change the width of td.shadow-top to 867;

 

[iWhat]

Wow, thank you so much! I knew I was on the right track, yet it was something little that was wrong. Thanks again mynameis!

*inserts token into slot*