Zoffix Znet Portal

Diagnosis

Affected browsers:

Internet Explorer 5.5 and 6 on Windows.

Visual appearance:

shifted/disappeared background (possibly content as well).

Triggers:

position: static (the default) and hasLayout set to false.

Overview

What a stupid bug! You set background on the element but for some reason it is not there in IE. The following demo also shows that the inner div's background disappeared. Ah, IE, the browser of the future!

Demo

HTML:
	<div id="demoContainer">
		<div id="demoInside">Stupid IE</div>
	</div>

CSS:
	div#demoContainer
	{
		background: #00d;
	}
	div#demoInside
	{
		background: #0f0;
	}

When this demo is viewed in Internet Explorer version below 7 the green background on the div#demoInside is not visible.

Solution

The fix for this bug is quite clean and simple, we do not even need to put in the IE conditional comments. All we need to do is set position: relative; to both elements. Here is the fixed code for the demo above:

div#demoContainer
{
	position: relative;
	background: #00d;
}
div#demoInside
{
	position: relative;
	background: #0f0;
}

However, this might not fix the issue of shifted or disappered content.

Another fix for this problem would be to set hasLayout to true on the container, in that case we don't need to set position: relative; on either of the elements. Here what the alternative fix would look like

<!--[if lt IE 7]>
	<style type="text/css">
		div#demoContainer
		{
			zoom: 1;
		}
	</style>
<![endif]-->

Suggested reading

•   CSS Position Property Specification
•   CSS Backround Property Specification
•   IE Conditional Comments

That is all! Happy fixing =)

Comments