PRB: Element Offsets Are "-1" When IFRAME Is Hidden (256977)

SYMPTOMS

When you place relatively-positioned elements inside a page that is set as the source of an IFRAME, the offsetLeft and offsetTop properties of elements on that page return "-1" when you set the style of the IFRAME to "display:none". This is a change from Internet Explorer 5, in which the offset* properties of the element return the true offset value regardless of the IFRAME's display state.

CAUSE

Internet Explorer 5.5 introduced the concept of "native frames", which include the conversion of IFRAMEs from windowed controls to windowless native elements. When IFRAME was windowed, the only way you could implement "display:none" was to create the IFRAME and move it off the visible area of the page. This rendered and positioned all child content before you moved the IFRAME off-screen.

However, because IFRAMEs are windowless in Internet Explorer 5.5, you can position neither the IFRAME nor its containing elements until you make the IFRAME visible.

RESOLUTION

Because you cannot restore the behavior as it was in Internet Explorer 5, you should revise your pages to use offsetLeft and offsetTop of the contained element's style object.

You can also wrap the contained elements in the IFRAME inside of another element that uses style that is set to "position:relative". This causes the offset* properties to return "0," as they should in this context, instead of -1.

MORE INFORMATION

Steps to Reproduce Behavior

Save the following HTML file as TestIFrame.htm:

<HTML>

<BODY>

<IFRAME id="frm1" style="display:none;" src="TestIFrameContained.htm">
</IFRAME>

</BODY>

</HTML>

Save the following HTML file as TestIFrameContained.htm:

<HTML>

<SCRIPT>

function load() {
	window.alert("Offset left is " + div1.offsetLeft);
}
</SCRIPT>

<BODY onload="load();">

<DIV id="div1" style="position:relative;left=40;top=40">
Hello, world!
</DIV>

</BODY>

</HTML>

Run TestIFrame.htm inside of Internet Explorer 5 or 5.01 and again in 5.5. In Internet Explorer 5 and 5.01, notice that the offset left of div1 in TestIFrameContained.htm reports "50"; in Internet Explorer 5.5, it reports "-1."

To make the offsetLeft report "0," surround div1 in TestIFrameContained.htm with another DIV set to relative positioning:

<DIV id="parentDiv1" style="position:relative;">
<DIV id="div1" style="position:relative;left=40;top=40">
Hello, world!
</DIV>
</DIV>

REFERENCES

For more information about developing Web-based solutions for Microsoft Internet Explorer, visit the following Microsoft Web sites:

http://msdn.microsoft.com/ie/

http://support.microsoft.com/iep