Friday, October 17, 2008

DOCTYPE element, why do we need it ?

Hey guys !


I wanna share with you some things about this DOCTYPE element which is included at the top of the html page.


Firstly, if we are using the Microsoft's AJAX Toolkit, we should ensure that we have a DOCTYPE element included, because some of our controls can freeze and not work. In my case, I was using a ModalPopupExtender which appeared in the upper left corner of the window and everything freezes (for comparision it's expected to be showed in the center of the screen ). For bad, browsers are different and in Firefox this ModalPopupExtender will work without problems, but there's no chance to work in IE. So if something with your AJAX Toolkit is behaving strange the first thing to check is the DOCTYPE element :)


Another thing which is notable to not work when the DOCTYPE element is missing is the CSS. Some properties like font-size can stop working, or again behave strange .. what is more it will depend on the browser, some things will work on Firefox and won't work in IE .. so it becomes even harder to locate the problem.


To conclude, if you have strange problems with AjaxToolkit or CSS, firstly ensure to check whether there is a DOCTYPE element in the html. Yes, I know that when Visual Studio creates a page it includes a DOCTYPE element, but in my case someone has removed this DOCTYPE for some reason .. and I had hard times figuring out why the ajaxcontrol toolkit controls was acting so strange.


More information about the doctype and the browser modes:
http://en.wikipedia.org/wiki/Quirks_mode -- quirks mode is the mode the browser enters, when you don't specify a DOCTYPE in all the browsers, when we're talking about the Transitional DTD. (You can check this by looking up in the table for HTML 4.01 spec. and Transitional DTD)