DOCTYPE caused AJAXToolkit problems....

It was a late night last night.

I was almost ready to go to bed when I discovered my AJAX Modal Popup Extender was broken in IE!

Basically it was working in every respect except the rather fatal flaw that it was displaying top left of the window and mostly off screen.

This was only occurring in IE and was new behaviour - it used to work....

After lots of swearing, head scratching and searching, I eventually identified that it was not a problem with relative/absolution positioning - there are lots of (out of date?) reports like these around - http://forums.asp.net/p/1076772/1583530.aspx

Instead this problem was caused byt he DOC TYPE declarations that had got added to my project as part of my Facebook Connect and my DotNetNuke 5.0 integration... This link tells a similar story - http://geekswithblogs.net/mnf/archive/2008/09/05/set-div-to-the-vertical-middle-of-the-browser-window.aspx

Basically, to fix this I had to patch and rebuild the Ajax Control toolkit - this is the change I made to the common.js file:

    getClientBounds: function() {

        /// <summary>

        /// Gets the width and height of the browser client window (excluding scrollbars)

        /// </summary>

        /// <returns type="Sys.UI.Bounds">

        /// Browser's client width and height

        /// </returns>

 

        var clientWidth;

        var clientHeight;

        switch (Sys.Browser.agent) {

            case Sys.Browser.InternetExplorer:

                clientWidth = document.documentElement.clientWidth;

                clientHeight = document.documentElement.clientHeight;

                // Workaround - added this code to cope with IE Transitional XHTML

                // - http://geekswithblogs.net/mnf/archive/2008/09/05/set-div-to-the-vertical-middle-of-the-browser-window.aspx

                if (clientHeight == 0 && clientWidth == 0) {

                    clientWidth = document.body.clientWidth;

                    clientHeight = document.body.clientHeight;

                }

                break;

            case Sys.Browser.Safari:

                clientWidth = window.innerWidth;

                clientHeight = window.innerHeight;

                break;

            case Sys.Browser.Opera:

                clientWidth = Math.min(window.innerWidth, document.body.clientWidth);

                clientHeight = Math.min(window.innerHeight, document.body.clientHeight);

                break;

            default:  // Sys.Browser.Firefox, etc.

                clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);

                clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);

                break;

        }

        return new Sys.UI.Bounds(0, 0, clientWidth, clientHeight);

    },