Archive for the 'HTML' Category

CSS3 Rounded Corners: Avoiding Image Clipping Problems

Published on April 25, 2011 in Chrome, CSS, Firefox, HTML, Internet Explorer and Standards. 4 Comments

The Scenario

Consider the following HTML+CSS setup: an img element wrapped in a div container with rounded corners (and optionally, a drop shadow); the div is sized to match the image’s dimensions, like so:

<!-- HTML -->

<div class="rounded">
    <img src="…" height="50" width="100" />
</div>
/* CSS */

div.rounded {
    border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.65);
    height: 50px;
    width: 100px; }

The Problem

If you’ve been playing around with CSS3 long enough, chances are you’ve already encountered this common problem: the corners of the image don’t get clipped by the container, although the container’s corners are rounded. A perfectly logical outcome, considering the box model behavior and element hierarchy, but in most cases, it’s not what we want for our layout. Continue reading ‘CSS3 Rounded Corners: Avoiding Image Clipping Problems’

Multibox: Troubleshooting Checklist

Published on March 25, 2009 in CSS, HTML and Javascript. 38 Comments

I ran into Phatfusion‘s Multibox while looking for a way to display MOV files in a lightbox fashion. I know, there are probably better ways to do it, but I was pressed for time, and Multibox happened to be sitting in the first page of my search results, so I went with that. Continue reading ‘Multibox: Troubleshooting Checklist’