Recently we encountered a problem with a form displaying incorrectly after an UpdatePanel callback. This particular problem only manifests itself within IE8 and IE7. (i.e. IE8 in compatibility mode) Click here to download the sample project I created to demonstrate this problem.

FireFoxIE_SideBySideComparison

This screenshot indicates the state of the browsers after the UpdatePanel callback has completed. I simply have the block of text within a <div> tag that has a static width of 500px defined. IE loses this style after the callback, but FireFox retains it most likely through cache, but it may also reevaluate styles sent back via the UpdatePanel. It is not clear whether this behavior is a bug or a feature, but through some means, IE is clearing its cache of the styles on the content within the UpdatePanel, and is not re-evaluating the new contents coming from the server with the callback.

Our solution was to place the styles into a separate file, and using a <link> CSS include, include this new CSS file from the containing page. This way the browser caches these styles and doesn’t lose them when the UpdatePanel callback is initiated. Considering that the new file’s sole purpose is is to style a single UserControl, and now everywhere this UserControl is used, we’d need to include this <link>, we’re not overly thrilled with this solution, but so far, it is the best we’ve come up with.