Microsoft KB Archive/256977

= PRB: Element Offsets Are "-1" When IFRAME Is Hidden =

Article ID: 256977

Article Last Modified on 5/11/2006

-

APPLIES TO


 * Microsoft Internet Explorer 5.5

-



This article was previously published under Q256977



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.



Steps to Reproduce Behavior
  Save the following HTML file as TestIFrame.htm : 



 



   Save the following HTML file as TestIFrameContained.htm : 

<SCRIPT>

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



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

</BODY>

</HTML> </li> 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."</li>  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> </li></ol>

<div class="references_section">