I'm trying to make the screenshot class to make a photo have a #f7f7f7 colored border of 3px, and a shadow around the bottom and right side. Here was the CSS I used:

.screenshot {
    text-align: center;
    border: 3px solid #f9f9f9;
    box-shadow: 2px 2px 2px 2px #ccc;
    background-color: #ffffff;
}

However, it displayed something like this. What was the problem — was the code I used in there wrong, or the CSS was used wrongly? -- Sam Wang (talk) 03:48, June 3, 2012 (UTC)

If I don't misunderstand what you want to do, adding display: inline-block; to this class should work.  Cafeinlove ^msg 13:23, 2012-06-03 (UTC+9)

Thanks! -- Sam Wang (talk) 04:46, June 4, 2012 (UTC)

With this code:

.screenshot {
    text-align: center;
    border: 3px solid #f9f9f9;
    box-shadow: 2px 2px 2px 2px #ccc;
    background-color: #ffffff;
    display: inline-block;
}

I managed to do a style similar to a printed out photo -- Sam Wang (talk) 04:53, June 4, 2012 (UTC)