FIX: Problem Toggling Display of Absolute in IE 4.01

ID: Q181676

The information in this article applies to:

Microsoft Internet Explorer (Programming) version 4.01

SYMPTOMS

If you have HTML that contains a tag that, when clicked, hides and shows another tag, the second tag will show correctly. However, it will not hide correctly, unless the Internet Explorer display is refreshed. This occurs only if you are using the Display style to hide and show the contents of your tag.

RESOLUTION

Use the Visibility style instead of the Display style.

STATUS

Microsoft has confirmed this to be a bug in the Microsoft products listed at the beginning of this article. We are researching this bug and will post new information here in the Microsoft Knowledge Base as it becomes available.

MORE INFORMATION

Steps to Reproduce Behavior

Create a Web page with the following HTML:


<HTML>
   <SPAN style="position:absolute; cursor:hand; top:0; left:0;
         width:120; height:18; background-color:C0C0C0;
         color:000000;"
         id="here">
   &nbsp;Click Here
   </SPAN>

   <SPAN style="display:none; position:absolute; top:0; left:0;"
         id="foo">
      <SPAN style="position:absolute; top:18; left:0; width:120;
         height:18" id="R8">
      &nbsp;Open
      </SPAN>
   </SPAN>

   <SCRIPT LANGUAGE=JScript>
      function go()
      {
         if (foo.style.display == "none")
            foo.style.display = "";
         else
            foo.style.display = "none";
      }

      here.onclick = go;
   </SCRIPT>
</HTML>

Click "Click Here". The contents of the second tag appear.

Click "Click Here" again. The contents of the second tag should disappear, but they do not.

Change the width of your browser. The contents of the second tag disappear.

To workaround this problem, change all occurrences of the Display style to Visibility, as in the following HTML:


<HTML>
   <SPAN style="position:absolute; cursor:hand; top:0; left:0;
         width:120; height:18; background-color:C0C0C0; or:000000;"
         id="here">
   &nbsp;Click Here
   </SPAN>

   <SPAN style="visibility:hidden; position:absolute; top:0; t:0;"
         id="foo">
      <SPAN style="position:absolute; top:18; left:0; width:120;
         height:18" id="R8">
      &nbsp;Open
      </SPAN>
   </SPAN>

   <SCRIPT LANGUAGE=JScript>
      function go()
      {
         if (foo.style.visibility == "hidden")
       foo.style.visibility = "visible";
         else
            foo.style.visibility = "hidden";
      }

      here.onclick = go;
   </SCRIPT>
</HTML>

REFERENCES

For more information on Dynamic HTML, see the Dynamic HTML topic on the Internet Client SDK Web site:

http://msdn.microsoft.com/workshop/essentials/inetsdk/inetsdk_map.asp

Additional query words: SPAN display style