IE5.0 Win bug - position: relative

This page describes a bug in Explorer 5.0 Windows that has been solved in Explorer 6.

Still looking for Explorer 5.5 compatibility info.

There are some problems with the left of absolutely positioned layers inside relatively positioned layers in Explorer 5.0 Windows.

I place a DIV with position: absolute inside a DIV with position: relative. The position of the inner DIV should now be calculated relative to the outer DIV. The styles are:

div.rel {
	position: relative;
	background-color: #AD007B;
}

div.abs {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #527BBD;
	color: #ffffff;
}

Problem

The absolute DIV should be positioned in the upper left corner of its parent. However, in Explorer 5.0 Windows it isn't. The absolute DIV is placed outside the relative one, flush against the left edge of the window. Apparently it calculates the left relative to the entire browser window instead of relative to the outer DIV.

Rel
Abs

Solution

The trick turns out to be giving the relative DIV a height (any value will do). In the second example I added a height: 100px; and the absolute DIV is positioned correctly in the upper left corner of the relative DIV.

Rel
Abs