I am using a popular css hack to enable border-radius in Internet Explorer 8 that is found here: (Curved-corner-border-radius-cross-browser).
It works as expected in IE8, except on any .net page that has a post back and SmartNavigation=True. On postback I get a javascript error Invalid Argument Line 87, this is in the htc file where the div with rounded corner’s offsetHeight / offsetWidth are being retrieved. The css does not work properly and the layout is totally messed up.
I put a javascript alert in this htc file just to show the value of the offsetWidth of the container that is supposed to have rounded corners. When you first load the page you see the numeric value, click OK on the alert and the css displays as it should. On post back, the alert will show a value -1. Click OK on the alert, and the css is broken. Why is it unable to find offsetWidth / offsetHeight on post back when SmartNavigation=True?
On postback the error occurs, invalid argument line 87 (actually 88 now with the alert) and the css does not render. I suspect it has to do with the page initialization and when the javascript in this htc file is being called. If this is the case, why is it working on the first page load, what makes how the htc file is called different during a post back when SmartNavigation=Ture.? Any ideas what to do to get this IE hack working with SmartNavigation?
Here is the page:
http://innerworkingdesigns.com/demos/radius/test.aspx
Click here to view the htc file
http://innerworkingdesigns.com/demos/radius/styles/border-radius.htc
The problem is with SmartNavigation=True. Removing this or setting to false fixes the problem. You will still be left with any issues that SmartNavigation=True resolved but this is minor and SmartNavigation has been deprecated http://msdn.microsoft.com/en-us/library/system.web.ui.page.smartnavigation.aspx.