BUG: Internet Explorer 5.5 Fails When You Access an Element Whose Display Style Is Set to None

View products that this article applies to.

This article was previously published under Q294984

Symptoms

If you try to modify an element that has its focus and display style set to NONE, you receive the following access violation in the browser:

The instruction at "0x011168db" referenced memory at "0x00000004". The memory could not be "read".

↑ Back to the top

Cause

An HTML element cannot have focus while its display style is set to none.

↑ Back to the top

Resolution

There are two ways to work around this problem:

Shift the focus away from the element before you set its display style to NONE.
Use the window.setTimeout method to delay execution of the code that modifies the hidden element.

NOTE: The amount of time that you must be set depends on computer's capability. If the delay time is not long enough, Internet Explorer may still fail.

↑ Back to the top

Status

Microsoft has confirmed that this is a bug in the Microsoft products that are listed at the beginning of this article.

↑ Back to the top

More information

The following code reproduces the behavior:

<html>
<head>
<script language="JavaScript">

	function test()
	{
	    thediv.style.display = "none";
	    thediv.innerHTML = "a";  
	}

        /* 
	*   Use test1() or test2() to show the workarounds.
	*   Just change the function call in the onclick
	*   event of "thediv" to either test1() or test2().
         */ 

	function test1()
	{
	    // Give focus to another element to resolve the problem.
	    inp.focus();    
	    thediv.style.display = "none";
	    thediv.innerHTML = "a";  
	}

	function test2()
	{
		thediv.style.display = "none";
		window.setTimeout("newFunction()", 1000);
	}

	function newFunction()
	{
	    thediv.innerHTML = "a";  
	}

</script>
</head>
<body>


<!-- width and height are necessary to make the div with its layout -->
<div onClick="test();" 
	 id="thediv" 
	 style="width: 500px; height: 30px; border: 1px solid red;"> 
     Click on this div and it will disappear
</div>
<input id="inp" type="text"></input>

</body>
</html>

↑ Back to the top