BUG: Problem Toggling Display of Absolute <SPAN> in IE 4.01

Last reviewed: February 25, 1998
Article ID: Q181676
The information in this article applies to:
  • Microsoft Internet Explorer (Programming), version 4.01

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:

    Sample Code -----------

          <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:

Sample Code

   <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="visibility:hidden; 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.visibility == "hidden")
          foo.style.visibility = "visible";
            else
               foo.style.visibility = "hidden";
         }

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

REFERENCES

For more information on Dynamic HTML, see:


Additional query words: SPAN display style
Keywords : AXSDKIESripting kbcode
Technology : kbInetDev
Version : winnt:4.01;win95:4.01
Platform : Win95 winnt
Issue type : kbbug
Solution Type : kbpending


THE INFORMATION PROVIDED IN THE MICROSOFT KNOWLEDGE BASE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND. MICROSOFT DISCLAIMS ALL WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING THE WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. IN NO EVENT SHALL MICROSOFT CORPORATION OR ITS SUPPLIERS BE LIABLE FOR ANY DAMAGES WHATSOEVER INCLUDING DIRECT, INDIRECT, INCIDENTAL, CONSEQUENTIAL, LOSS OF BUSINESS PROFITS OR SPECIAL DAMAGES, EVEN IF MICROSOFT CORPORATION OR ITS SUPPLIERS HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. SOME STATES DO NOT ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES SO THE FOREGOING LIMITATION MAY NOT APPLY.

Last reviewed: February 25, 1998
© 1998 Microsoft Corporation. All rights reserved. Terms of Use.