FIX: Problem Toggling Display of Absolute <SPAN> in IE 4.01 (181676)


The information in this article applies to:

  • Microsoft Internet Explorer (Programming) 4.01
This article was previously published under Q181676

SYMPTOMS

If you have HTML that contains a <SPAN> tag that, when clicked, hides and shows another <SPAN> tag, the second <SPAN> 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 <SPAN> 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

  1. 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>
  2. Click "Click Here". The contents of the second <SPAN> tag appear.
  3. Click "Click Here" again. The contents of the second <SPAN> tag should disappear, but they do not.
  4. Change the width of your browser. The contents of the second <SPAN> 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

Modification Type:MinorLast Reviewed:3/16/2005
Keywords:kbbug kbcode KB181676
©2004 Microsoft Corporation. All rights reserved.