Using DOCTYPE to fix browser cross compatibility problems
Almost every web designer out there at some point during their designing has run into problems with cross browser compatibility problems. These problems are caused by web browsers such as Internet Explorer and FireFox going into “quirks mode” when displaying the website. Quirks mode is the browsers code compatibility mode that it uses to interpret and try to fix problems in the website HTML code. For a web design quirks mode does more harm then good. There is a solution to keep web browsers out of quirks mode when displaying web sites.
The solution is for the web designer to specify a valid DOCTYPE at the top of their web page documents. DOCTYPE is a tag that explains to the browser exactly how to interpret and display the HTML on the page. A complete and valid DOCTYPE tag has in it the type of HTML code the designer is using as well as a link to the specification sheet for that type of code. Keep in mind that the URL portion of the DOCTYPE tag is extremely important. This tells the browser where to find the specifications for the type of document and how to properly render the page. A standard and valid DOCTYPE tag may look like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
The above would be a valid DOCTYPE flag for a XHTML 1.0 Transitional page. Take note of how it includes the document type, “DTD XHTML 1.0 Transitional”, and the URL to the specification sheet, “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”. Browsers will see this as a valid DOCTYPE tag, download the specification sheet and render the page as described in the specification sheet.
A good list of valid and compliant DOCTYPE tags can be found on the W3C.org web site under Recommended DTD Lists.
The DOCTYPE tag should be placed at the top of every page in a web site. It should be the first line in the page with no white space before it. Placing the DOCTYPE tag anywhere else in the file will cause the browser to return to quirks mode when rendering the page.
Having a valid DOCTYPE tag in a page will cause most cross browser compatibility problems to cease. The reason it does not fix all cross browser compatibility problems is that browsers will need to have some things they render differently then other browsers. If all browsers rendered every page exactly the same then there would be no need to have multiple browsers for the internet. Currently a valid DOCTYPE tag will fix roughly 99% of cross browser compatibility problems with a web sites code, however it does not help fix compatibility problems with CSS or JavaScript.
Note that a designer can get by without specifying a valid DOCTYPE tag such as Portland Technology Consultants, which is missing the specification URL, or Amazon, who does not specify a DOCTYPE tag at all. It is just easier to specify the DOCTYPE tag then fight against the compatibility issues of quirks mode.
Save as PDF file
