Write a comment on this article

Quirks mode and browser bugs

The quirks mode

The quirks mode is a technique of modern browsers to maintain backward compatibility with older websites. Because most older browsers did not implement standards specifications of HTML, websites that relied on these incorrect or incomplete implementations were created.

If these old websites were rendered according to HTML standards today, they would not look like they were supposed to. So, modern browsers are able to switch back to the old technique (quirks mode) to render these pages "correctly". If the browser detects a new website, it uses standards mode. Some browsers also have an almost standards mode, which is a mixture of the first two modes.

However, when you create a fresh website you should choose a standard document type and stick to the rules of this type's specification. This way you are on the safe side. To define the chosen document type you need to include the DOCTYPE element at the very beginning of your page. For an overview of the available document types visit the Introduction to HTML.

Under some circumstances, browsers may switch to quirks mode even though a document type is defined. To avoid this (your document would be rendered in quirks mode and may look different) you should be aware of the following things:

  1. Incomplete or missing DOCTYPE
    Be sure to define an HTML version and a URL of a document type definition in your DOCTYPE element. The following code would cause browsers to use quirks mode:

    <!DOCTYPE html PUBLIC>
    select code
     

  2. XML prolog
    An XML prolog before the document type definition in XHTML pages will trigger quirks mode. This bug is especially known in Internet Explorer. The following code would be rendered in quirks mode by Internet Explorer 6:

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    select code
     

  3. HTML comments
    If the document type definition is preceded by an HTML comment, the document will also be rendered in quirks mode, as in the following example. This is also especially known for Internet Explorer.

    <!-- this is a comment -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
    select code
     

To summarize, keep your document type definition at the very beginning of your page and make sure it contains an HTML version an a URL of a document type definition.

Browser bugs

Not all browsers are the same. There are many different ones, like Microsoft Internet Explorer, Mozilla Firefox, Opera, Apple Safari, Google Chrome, Konqueror, and so on. One major task of a browser is to render an HTML file to text, shapes and tables. Although there are specifications on how a HTML should be rendered, each browser does it differently and, as you would expect, not perfectly.

So each browser has its own list of rendering bugs (mistakes when rendering HTML source) and, of course, other bugs like JavaScript misbehavior or false CSS interpretation. Some have more, some have less. Here are some bugs you should know about, for more details see the resources list below.

Table cell rendering bug

A table with a specific width and a cell which spans over two cells will be rendered incorrectly when the spanning cell and one other cell have specific widths. You can test this bug here: Table_cell_rendering_bug.html.

The following browsers pass this test: Google Chrome 1.0, Apple Safari 3.2.1, Mozilla Firefox 3.0.5

The following browsers fail this test: Internet Explorer 6, Internet Explorer 7, Opera 9.62,

Source: http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/table-width-colspan-test1.html

Underline image bug

Images with a surrounding underline-element are not underlined. You can test this bug here: Underline_image_bug.html.

The following browsers pass this test: Google Chrome 1.0, Apple Safari 3.2.1, Mozilla Firefox 3.0.5

The following browsers fail this test: Internet Explorer 6, Internet Explorer 7, Opera 9.62,

Source: http://www.gtalbot.org/BrowserBugsSection/Opera9Bugs/ExpandingAltTextForImages.html

You see, when creating a website it is important to test it with different browsers. Of course, the optimum would be to use all browsers, but this would be far too time intensive. A good solution is to test with the most common browsers. The chart below shows the average browser usage in December 2008.

Figure 1: Browser statistics of December 2008 (Source: http://www.w3schools.com/browsers/browsers_stats.asp)

As you can see, Internet Explorer and Mozilla Firefox together make about 90%, so you should consider these browsers when testing your website. If you are developing on a Linux machine or on a Mac, try to find a workaround like installing Windows in a virtual environment.

Tags

HTML, quirks mode, browser, bugs, incompatibility

Comments (2)

Leave a comment

If you have a question or a problem and you're looking for a solution, please use the forum. Comments might not be answered.

Your name (required, maximum 255 characters) ( remember)
Your message (required, maximum 5000 characters)
 
Insert these letters into the textfield below: NbNf (required, case-sensitive)
Drag the slider to the right (required)