Browser Quirks, Standard Compliance modes and Doc Types

By Lee Sykes

March 2006 (Updated September 2006)

Quirks and Standards Compliance Modes

Quirks and Standards Compliance modes are the two methods that browsers can use to interpret your CSS.

Quirks mode enables your browser to behave as if it is an older browser, such as Internet Explorer 5.

The reason for this is that when Netscape 4 and Internet Explorer 4 implemented CSS, they did not match the W3C standard. IE5 fixed a few of these bugs, but also brought with it some misinterpretations of the W3C standard, such as the box model bug.

Web developers had to work with the browser bugs to build their websites and therefore created websites using code that also does not completely match the W3C standards.

Browser vendors now faced a problem when releasing their updated browsers. If they created a completely W3C compliant browser, many websites would break because they were not coded to the W3C standards, they were coded to the standards of the older browsers.

The solution provided by the vendors was to create a browser that can switch between compliance modes.

Therefore, modern browsers can now interpret CSS in quirks mode for the older website that was not coded to the W3C standard, or in standards compliance mode for a modern website coded to the W3C standard.

Switching modes

In order to specify which mode you require a browser to interpret your CSS, you place DOC TYPE code at the head of your HTML document. This code informs the browser whether to use quirks mode or standards compliance mode and enables you to ensure that your website is displaying correctly across the various browsers.

DOC TYPES Document Type Definition (DTD)

There are various choices for Doc Types, which are listed below.

To set a browser to use quirks mode, use the HTML 4.01 DTD. A default installation of DotNetNuke uses the HTML 4.01 Transitional DTD, so most DotNetNuke websites are interpreted by the browsers in quirks mode.

HTML 4.01 Strict, Transitional, Frameset

To set a browser to use standards compliance mode, use the XHTML 1.0 DTD.

XHTML 1.0 Strict, Transitional, Frameset

The three DTDs available in XHTML 1.0 are:

Strict:

Strict follows the most stringent rules of XHTML. Only current elements, attributes, and character entities are allowed in documents written in this type. Elements such as font or center, that were deprecated in HTML 4.0, are not allowed. Obsolete elements are also not allowed.

Transitional:

A transitional XHTML 1.0 document is more lenient, allowing the author to use deprecated as well as current methods. You can use font or center, or any other deprecated markup in a transitional document, so long as the document itself is properly marked as such. No obsolete elements should be used.

Frameset:

The frameset DTD is reserved only for frameset documents. A frameset document conforming to this DTD can use either strict or transitional markup. To create a frameset document in XHTML 1.0, include this DOCTYPE at the top of your document:
[1]

Which XHTML DTD is suitable for DotNetNuke®?

Transitional is the suitable format for DotNetNuke. This is because at present, DotNetNuke does not produce valid XHTML code. You may create a skin to XHTML strict standards, but there are no guarantees what standards the modules that DNN uses have been produced to.

Therefore the transitional DOC TYPE allows us to set a browser to use standard compliance mode while still allowing for modules and core DNN code to use deprecated code.

How do we set DotNetNuke to use XHTML 1.0 transitional DTD?

DotNetNuke only uses one page to present its content. This page is the default.aspx page that is in the root of your DotNetNuke installation files.

In order to set DNN to specify XHTML 1.0 Transitional as the Document Type Definition (DTD) we need to edit the default.aspx page.

Note: From DotNetNuke version 4.4+ you can now change the DOC TYPE directly within a skin. This is outlined in this tutorial: How to select DOC TYPES in DotNetNuke 4.4

Before editing the default.aspx page, make sure you read this tutorial in full to ensure you are aware of the pros and cons of changing the default.aspx page.

For DotNetNuke versions 4.3.4 and below

Within the source code of the default.aspx file, we need to change the third line:
to:
We also need to change  the <html> tag to:
We now need to make all of the code within the default.aspx file XHTML compliant.

This involves:

Changing all HTML tags to lowercase:
 <TITLE> eg: <title>

Closing all tags:
eg:
Etc.

Read this article for  tips on creating XHTML compliant code.

I have edited and created a default.aspx file which you can download at the end of this article.

All you have to do is upload the edited default.aspx file to your DNN installation and the browsers will now use the standards compliance mode.

I highly recommend that you test this first on a localhost installation and that you create a backup file of the original default.aspx file incase there are any incompatibilities. Do not install this file to a live website without thoroughly testing it is compatible with your setup.

Warnings

Editing the default.aspx file affects:

All of your portals and all of your skins that are installed on your DotNetNuke installation. If you wish to use other skins on your portal that rely on browsers using quirks mode, do not change the default.aspx file.

The Solpart menu does not display correctly when a browser is using standards compliance mode. (DNN Versions 3.2.2 / 4.0.3 and below). This affects the display of the settings menu for the module settings as well as the main website menu. You need to use a different menu system in order to access your DotNetNuke portal. The House of Nuke menu is recommended for this.

Any drop down menus created by the Solpart menu are displayed in the top left corner of the browser window and can not be selected.

 


To restate this, any skins that you have already installed on your DotNetNuke portal (DNN Versions 3.2.2 / 4.0.3 and below) that rely on browsers using quirks mode or that use the Solpart menu will no longer work when you switch to standards compliance mode. You will need to edit these skins to make them compatible and to configure them to use a different menu system.

This tutorial explains how to install and configure the House of Nuke menu to a DotNetNuke skin

This tutorial explains how to remove the solpart menu from your containers and use a drop down list

Pros:

We can now begin to configure a more accessible DotNetNuke skin taking advantage of techniques such as the ability:

• To re-size text within Internet Explorer (View Why should we bother to create resizable text? for a series of pros)
• Reduced page size – We are forced to use a different menu system. Using the House of Nuke menu rather than Solpart menu reduces your page size. (In our example tutorial it reduces the page size by 10k)
• To create pure CSS layout skins, which give the advantages of increased accessibility, search engine friendly skin design, small page file sizes, quicker page load times, less bandwidth used, etc.

Before you change DotNetNuke to use XHTML 1.0 transitional DTD make sure you follow these tutorials first:

How to install and configure the House of Nuke menu to a DotNetNuke skin

How to remove the solpart menu from your containers and use a drop down list

---

Further Reading and references:

[1] XHTML – Marking of a new dawn

A good overview of the various modes and differences in implementation between the various browsers

A list of all recommended DTDs by W3C

A list of the differences between XHTML strict and transitional