IE 7 beta 3 CSS Clipping Bug

The Problem

Given an absolutely positioned DIV (call it innerLayer) inside another DIV (call it outerLayer), in IE 7 beta 3, innerLayer.style.overflow settings clip the container innerLayer itself, rather than its content. The clipping region of innerLayer is set to be the width of the outerLayer if innerLayer did not have width specified.

The Test

CSS:

.outerLayer
{
	width:	5em;
	height: 14em;
	background-color: black;
}
.innerLayer
{
	position: absolute;
	left: 5em;
	background-color: blue;
	padding: 0;
}
.dataLayer
{
	width:	10em;
	height:	2em;
	margin:	0.5em;
}

The elements:

<div class="outerLayer">
	<div class="innerLayer" style="top: 55em;">
		<hr class="dataLayer"/>
	</div>
	<div class="innerLayer" style="top: 60em; overflow: hidden;">
		<hr class="dataLayer"/>
	</div>
	 
</div>

The Appearance of the Bug

In the three boxes above, two blue boxes should have the same width in Opera, Safari, Firefox, and IE6. However in IE 7, the bottom box gets clipped to the width of the black box, and thus appears shorter.

W3C CSS states that overflow clips the content, not the container itself. Clearly it is a bug of IE 7 beta 3.

Work Arounds

There are no work arounds other than using a JavaScript to first determine the content size (dataLayer) and then set the innerLayer width.

Significance of this Bug

This bug can affect some DHTML menus that use certain tricks to display shadows, and scrolling effects. See JSCookMenu the panel at left.

Fixed

This bug has been fixed in the final release of IE7.