How do I clip these images?

Posted on 2012-09-17
Last Modified: 2012-09-24
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:

     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="<?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?
Question by:brucegust
    LVL 30

    Accepted Solution

    Is there a live URL we can view? Generally the clip property only works on absolute positioned elements.

    Author Comment


    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now