Quirks Mode of Browsers

I need to add a drop-down menu in one PHPNuke enabled site. There are many drop-down menu available in Internet. Some are JavaScript programs, and some are CSS enabled. Of course, they are open source.

After looking at those menu for 1 hour, I decided to use a pure CSS menu from designmeme. Those JavaScript menus are way too complicate, and it requires some effort to go through the code to modify color, style. This CSS menu is pretty straightforward. There are 50 lines of CSS code to decide the style of UL and LI.

So I created a new test.htm and put the menu in it. It works fine in both Firefox and IE. Perfect! After I put the menu in header.html of the theme I am using in the PHPNuke and upload it to server, here comes the fun part: The drop-down menu only worked in Firefox, not in IE.

I spent 30 minutes to compare the test.htm and the output of PHPNuke. I actually downloaded ExamDiff to compare it. It is ironic that Visio Studio doesn't provide such a tool to compare 2 files. Finally, the result is: The test.htm is started with
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
while the output of PHPNuke is started with
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

and the latter is parsed by browsers in Quirks Mode.

What is Quirks Mode? It is a mode that the webpage is considered as "not compatible with W3C standard", so the browser will parse it in the way the browser thinks suitable. The PHPNuke's output claims itself not compatible with W3C standard, so Firefox parses it as drop-down menu, but IE parses it in other way.

Please make your site in Standard Mode.


Reference:
http://en.wikipedia.org/wiki/Quirk_mode
http://www.webmasterworld.com/forum21/7975.htm
http://msdn2.microsoft.com/en-us/library/bb250395.aspx

PS: On right side bar I embedded a weather forecast of my living city. It shows good in IE but not good in Firefox. Yes, that is exactly what you are thinking: The header of it is:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
So it is telling the browsers to work in Quirks Mode, so it is very normal that it acts different in these two browsers.