IE Bug: Embedded CSS Styles within AJAX UpdatePanel

Scenario

• You have a Web UserControl with embedded <style> tags within an UpdatePanel.

Issue

• Internet Explorer: After an Asynchronous postback some of the Styles are no longer applied.


• In my case the height property on a div.  This was confusing since the code was expanding/collapsing the div, but the bug was ignoring the style.


• If you check the source via IE Developer Toolbar you will see that the style is supposed to be applied.

Resolution

• I was able to resolve this by moving the <style> section to the bottom of the UpdatePanel.


• I don't know why this works.


• The best solution is to move the <style> section to the Master Page or Aspx Page <header> section.


• This is the only approved location for embedded Styles.
• You can alternatively include a css file.


• Another alternative is to RegisterClientScriptBlock the style or an external css reference from the UserControl


• See this blog.

Sample Code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <style type="text/css">
            div
            {
                display:block;
                overflow:auto;
            }
            .collapsed 
            {
             height:50px;         
            }
            .expanded
            {
             height:inherit;
            }
        </style>
        <asp:Panel CssClass="collapsed" runat="server" ID="pnlMain">
            1<br />2<br />3<br />4<br />5<br />6<br />
        </asp:Panel>
        <asp:Button ID="btnExpCol" runat="server" Text="Expand" />

    </ContentTemplate>
</asp:UpdatePanel>