Workaround for UpdatePanel/Whitespace bug in IE

Last post 06-24-2009 11:09 PM by Vince Xu - MSFT. 3 replies.

Sort Posts:

  • Workaround for UpdatePanel/Whitespace bug in IE

    06-16-2009, 3:53 PM
    • Member
      point Member
    • mepaco
    • Member since 02-26-2008, 5:48 PM
    • Posts 9

    I have an old page that was recently retrofitted with UpdatePanels to try and make it a little better until we can do a decent re-write on it.  However, we are now having an issue with whitespace disappearing in IE 7 (haven't tried with other versions).  The code below is for a very simple form that re-creates the problem.  In IE, clicking the button within the update panel causes all the whitespace in the label's text to disappear.  This does not happen in Firefox and I have confirmed through Firebug that the spaces are being sent by the server.

    So, the real question is, what can I do to fix this?  Is there a simple workaround that anyone can think of to fix this until we can re-work the page?

    Thanks,
    Patrick

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>I'm a piece of junk</title>
    <style type="text/css">
    .PW
    {
    white-space:pre;
    }
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <br />
    <fieldset>
    <legend>Not in update panel</legend>
    <asp:Label runat="server" ID="lblTest1" CssClass="PW"> I have spaces ! </asp:Label><br />
    <asp:Button runat="server" ID="btnTest1" Text="Click Me" />
    </fieldset>
    <br /><br /><br />
    <asp:UpdatePanel runat="server">
    <ContentTemplate>
    <fieldset>
    <legend>In update panel</legend>
    <asp:Label runat="server" ID="lblTest2" CssClass="PW"> I have spaces ! </asp:Label><br />
    <asp:Button runat="server" ID="btnTest2" Text="Click Me" />
    </fieldset>
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
    </body>
    </html>
      
    Filed under: ,
  • Re: Workaround for UpdatePanel/Whitespace bug in IE

    06-18-2009, 2:13 AM

    Hi,

    That's the issue in IE7 http://www.giant-systems.co.uk/web_design/Web_Design_Journal/IE7_Whitespace_bug.aspx

    Please use &nbsp; instead of whitespace.


    Vince Xu
    Microsoft Online Community Support
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
  • Re: Workaround for UpdatePanel/Whitespace bug in IE

    06-24-2009, 12:11 PM
    Answer
    • Member
      point Member
    • mepaco
    • Member since 02-26-2008, 5:48 PM
    • Posts 9

    Thanks.  I can't access that link here at work (stupid filter) but I'm not sure if that is a good option.  I apologize that the example I gave wasn't more representative of the actual form, but this isn't for static strings.  This is actually all inside of an editable GridView and the users want the spaces to show up.  I could do some sort of replace operation when switching between edit/static view but sounds crummy as well, especially since I can't save it with the &nbsp; since this data is used by non-web applications.

    For now, the workaround I have is to wrap all the ItemTemplates in <pre> tags and using styles to fix the formatting.  Not pretty but it will work until I can refactor the whole page.

    Thanks,
    Patrick

  • Re: Workaround for UpdatePanel/Whitespace bug in IE

    06-24-2009, 11:09 PM
    Answer

    Hi,

     I parse the content from this link which is about IE7 whitespace issue. Hope it can help you.

    I noticed recently a comprehensive list of bug present in IE 6 bugs which have been fixed in the latest release of IE7 (http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx)

    A very interesting read, clearly there are lots of differences between the rendering engine of IE6 and IE7.   It seems likely that it will be these issues that will be keeping client side web developers busy in the near future.  As we start to spend more time on ensuring websites render correctly in the most recent version of IE and Firefox the above list of bugs will become increasingly common in websites.

    Its well work reading the above list and getting to know the bugs now as they are likely to crop up time and time again in the coming months / years.

    The list mentions that the "list-item whitespace bug" has been fixed. (white space in mark up putting blank space randomly in the content of rendered content).  However I noticed the whitespace bug occurring in IE7 in an unordered list menu which incorporated images!  So clearly whitespace bugs do still occur in IE7.  It might be that they this bug occurs in less situations.  However they say it does sometimes occur in both IE6 and 7.....

    To ensure that you avoid the whitespace bug in IE6 AND IE7 remove all whitespace from markup where images are encased in links.  For example rewrite this:

    <ul>
        <li>
        <a href="#" ><img src="img.gif" alt="Blah" /></a>
        </li>
    </ul>

    As:

    <ul><li><a href="#" ><img src="img.gif" alt="Blah" /></a></li></ul>

    (Same markup but with white space removed)


    Vince Xu
    Microsoft Online Community Support
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
Page 1 of 1 (4 items)