As great as the AjaxControlToolkit is, it still contains a couple of (big) annoyances. The good thing is, that you can change the source-code yourself. So here it is, the changes I need to remember, when I do another custom build of the AjaxControlToolkit.

TabControls
The TabControl has the annoyance, that on Internet Explorer, a small rectangle of the tab is not displayed. Adding the following lines to the web page or changing the TabControl stylesheet Tabs.css will solve the problem:

<style type="text/css">

    .ajax__tab_xp .ajax__tab_tab { height: 21px; }

</style>

ModalPopupExtender
Why should the ModalPopupExtender actually work on Microsoft's own browser? Well it does, as long as the DOCTYPE of the web page is set correctly (meaning transitional). But when IE is in quirks mode, the popup shows up centered to the top left corner, and when scrolling, the page gets larger and larger, because the background element created, to prevent clicks on other elements is moved down. Thanks to this great blog entry.   

• Change the function 'getClientBounds' in common.js. In the browser switch, change the IExplorer part:

• 	
  
  		switch(Sys.Browser.agent) {
  
  		    case Sys.Browser.InternetExplorer:
  
  		        if (document.documentElement && document.documentElement.clientWidth)
  
  		            clientWidth = document.documentElement.clientWidth;
  
  		        else if (document.body)
  
  		            clientWidth = document.body.clientWidth;
  
  		        if (document.documentElement && document.documentElement.clientHeight)
  
  		            clientHeight = document.documentElement.clientHeight;
  
  		        else if (document.body)
  
  		            clientHeight = document.body.clientHeight;
  
  		        break;
  
  	
  	

• Change the function 'initialize' in ModalPopupBehavior.js. Replace the lines

this._backgroundElement.style.position = 'fixed';
...
  this._foregroundElement.style.position = 'fixed';

  with
  
this._backgroundElement.style.position = 'absolute';
  ...
  this._foregroundElement.style.position = 'absolute';


• To get the background element hiding all the links and other elements on the web page, you'll need to give it a separate CSS stylesheet (BackgroundCssClass) and just use a transparent image for the background. That's it.
  

  		.PopupBackground { background:url(spacer.gif); }