How Quirks Mode Can Affect Custom Banner Behavior

We are hearing from our publishers that they are experiencing display issues with Custom Banner causing an unacceptable user experience on their site. We've included a few examples throughout this post.

These types of issues are often caused by “Quirks Mode.” Quirks Mode refers to a technique used by modern web browsers (Android 1+, Chrome 1+, IE 6+, iOS 1+, Firefox 1+, Netscape 6+, Opera 6+, Safari 1+) to maintain backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standard modes. For example, when Netscape 4 and IE 4 implemented CSS, their support did not match the W3C standard (or even each other). To make sure that their websites rendered correctly in the various browsers, web developers had to implement CSS according to the wishes of these browsers. Thus, most websites used CSS in ways that didn’t quite match the specifications.

Often, browsers determine which rendering mode to use based on Document Type Declaration in the page; if a full DOCTYPE is present the browser will use standards mode, and if it is absent the browser will use quirks mode. For example, a web page that began with the following DOCTYPE would trigger standards mode:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">

The following DOCTYPE is syntactically invalid and would trigger Quirks Mode: <!DOCTYPE html PUBLIC>

Additionally, a web page that does not include a DOCTYPE at all will render in Quirks Mode.

We recommend you change your doctype from:

<!-- DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" -->

to:

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

Change X-UA-Compatible Meta Tag from:

<META content="IE=5.0000" http-equiv="X-UA-Compatible">

to:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

When possible, the source code should be updated to incorporate the coding practices of Semantic Markup and Progressive Enhancement. These practices rely on CSS for layout and shun using tables for constructing the page.

If possible, do away with the X-UA-compatible meta tag. Microsoft recommends, “that websites use the HTML5<http://go.microsoft.com/fwlink/?linkid=203771> document type in order to support the widest variety of established and emerging standards, as well as the broadest range of web browsers”.

While you once could rely on Microsoft’s coding practices to satisfy a lion’s share of your customers, they now command only a diminishing 20% of browsers in most cases. Complying with W3C standards will give a larger share of customers a better user experience.

We hope you found this post helpful in better understanding how Quirks Mode can affect your website in different browsers. Please let us know if you have any questions by leaving a comment.