Everyone knows that the W3C stated that we should never expand boxes even if there are other elements wider/higher than themselves, but IE6 just wouldn’t listen. It thinks it’s being civil but in reality it just destroys a layout. This bug has been known for half a decade but there haven’t been perfect fixes. My workaround isn’t perfect but it does look a little bit better.

See for yourself. I’m sure it’s happened to you…

Example 1: IE being a pain again
IE being a pain again

1. Give the box an overflow property

I know this workaround has been around for quite some time, but many sites only say to use:

Example 2: a method many sites offer

/*
The star-html hack is used because IE thinks that the <html>
element exists within some mysterious parent element.
*/
* html #your-div {
    overflow: hidden; /* Inadequate and obtrusive! */
}

The problem is, as the property says, #your-div will completely mask anything that overflows it. That means it will literally crop images bigger than itself. That’s not right. We want the image to overflow like Firefox and Opera do, according to the W3C specifications:

Example 3: the way things should’ve been
The way things should've been

2. Relatively position all images

Some other sites say to add a bit of positioning:

Example 4: position: relative;

/*
It's recommended you either place this at the very top
so it can always be overridden where necessary, or apply
this to only images that are children of a certain element.
*/
* html img {
    position: relative;
}

IE won’t listen to that!

IE will still crop the image, but only in quirks mode when it’s actually following W3C specifications! When you force it into standards-compliant mode with a DOCTYPE declaration, its result is substandard.

Example 5.1: IE still cropping that image, as W3C says
IE still cropping that image, as W3C says

Example 5.2: source code

<!--
Notice that we don't have a DOCTYPE declaration, but
presence of the XML prolog also causes IE to enter quirks
mode because it isn't a DOCTYPE itself.
-->
<html>
<head>
<!-- ... -->
<style type="text/css">
/*
In fact, we used the star-html hack here because by W3C
standards, overflow: hidden MUST beat position: relative;
and therefore in standards-compliant browsers the image
will still be cropped.
*/
* html #your-div {
    /* Width, text, background, border, etc properties here */
    overflow: hidden;
}
 
* html img {
    position: relative;
}
</style>
</head>
<body>
<!-- ... -->
<div id="your-div">
    <p><!-- text here --></p>
    <p><img src="http://www.example.com/logo.png" alt="Logo" /></p>
</div>
<!-- ... -->
</body>
</html>

How do we get IE to display that image just like Firefox and Opera did above?

3. Coax IE into standards-compliance

Just trigger standards-compliant mode, by adding a DOCTYPE or removing the XML prolog (because the W3C did not make it necessary, but I’m not sure about XHTML 2), and so there you go:

Example 6.1: the result of adding a DOCTYPE
The result of adding a DOCTYPE

Example 6.2: source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- ... -->
<style type="text/css">
* html #your-div {
    /* Width, text, background, border, etc properties here */
    overflow: hidden;
}
 
* html img {
    position: relative;
}
 
 
</style>
</head>
<body>
<!-- ... -->
<div id="your-div">
    <p><!-- text here --></p>
    <p><img src="http://www.example.com/logo.png" alt="Logo" /></p>
</div>
<!-- ... -->
</body>
</html>

The width of the box will now remain as a constant 100 pixels, unaffected by the picture.

You want it, you got it; here’s a proof of concept.

Summary

The IE Expanding Box Bug has been a big thorn in our sides for a couple years now. I guess experimenting really does bear some tasty fruit after all :D

According to the W3C specifications, an object/element wider or taller than its container should just appear, without the container having to resize to fit the element. The container should produce scrollbars if either overflow: scroll or overflow: auto is used:

  • The scroll value should force scrollbars horizontally and vertically regardless of content.
  • The auto value should produce a horizontal scrollbar if a width is specified then overflown. Likewise for height.

If the container is given a CSS property of overflow: hidden, if a width was explicitly set then everything that goes beyond that should be cropped off, and likewise for height, regardless of positioning.

IE6 doesn’t know this, and proceeds to let the image fly free from the container.

Nice job Microsoft.

Back to top