Archive for the 'Internet Explorer' 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’

CSS First-Aid for IE Peekaboo Bug

Published on January 6, 2007 in Bug, CSS, Internet Explorer and Web. 45 Comments

That annoying IE peekaboo bug just doesn’t know when to stop. Apparently, even IE7 exhibits this bug, and it appears to be worse than its predecessor. If you happen to be pressed for time (or are lazy to search the Internets for a solution), applying a couple of stylesheet rules to the affected element should solve most peekaboo problems for both IE6 and IE7:

position: relative; /* peekaboo bug fix for IE6 */
min-width: 0; /* peekaboo bug fix for IE7 */

Continue reading ‘CSS First-Aid for IE Peekaboo Bug’

An Even Better IE Button Width Fix

Published on May 12, 2006 in CSS, Internet Explorer and Web. 37 Comments

Last time around, I went about writing an article documenting a revision for Jehiah’s IE Button Width Fix that would allow it to behave correctly, given a proper DOCTYPE. It worked well, with a minor downside that it required the use of IE conditional statements in your HTML to dish out the fix to just Internet Explorer browsers.

Just recently, Peter replied to that article, proposing an alternative solution that did away with conditional statements. This would mean that you could include the CSS fix in your main stylesheet (and not in the HTML with the conditional comment, or in a separate stylesheet for just IE fixes).

Continue reading ‘An Even Better IE Button Width Fix’

Standards-Friendly IE Button Width Fix

Published on February 14, 2006 in CSS and Internet Explorer. 9 Comments

Sometime in October of 2005, Jehiah Czebotar came up with the IE Button Width Fix. This workaround solves the extra side-padding problem that plagues buttons with long labels being displayed in Internet Explorer. Continue reading ‘Standards-Friendly IE Button Width Fix’