How do I clip these images?

I've got a screen shot of my currently pathetic attempt to clip a series of images using the css clip property.

I've played with this for a while now and concluded that I need to appeal to the ninjas.

Here's my CSS:

.crop{
     float: left;
  margin: 0 10px 0 0;
  position: relative;
  width: 70px;
  height: 70px;
  border: solid 1px #000;
}
   
.crop img{
 width: 100px;
  height: 70px;
  position: absolute;
  clip: rect(0 85px 70px 15px);
  left: -15px;
}

...and here's my HTML:

<td div class="crop">
<a href="http://www.facebook.com/fbuid=<?php echo $row['voter_id']; ?>" target="_blank"><fb:profile-pic uid="<?php echo $row['voter_id']; ?>" width="45" border="0"></fb:profile-pic></div>

I want a series of 45px X 45px squares and instead I get these rectangles and I don't know what I'm doing wrong.

Tcss catastrophehoughts?
brucegustPHP DeveloperAsked:
Who is Participating?
 
LZ1Commented:
Is there a live URL we can view? Generally the clip property only works on absolute positioned elements.
0
 
brucegustPHP DeveloperAuthor Commented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.