Doctype and Quirk Modes and HTML 5

Doctype and Quirk modes and HTML 5

No. The whole point of quirks mode is that it's a compatibility mode for IE5. This means that in addition to changing the layout mode, it also switches off most of the browser features that have been invented since IE5.

Therefore the blunt answer is no, you cannot mix Quirks mode and HTML5. It just can't happen.

However there is some good news for you: switching from quirks mode to standards mode is actually easier than it looks at first glance.

You don't have to go through your whole site changing all the CSS to suit the different box model, because standards mode does have a CSS feature that allows you to use the quirks mode box model while still remaining in standards mode.

Simply add the following to the top of your CSS code:

* {box-sizing:border-box;}

This will change all your elements to use the quirks mode box model, but your page will still be in standards mode.

This should sort out most (if not all) of the layout issues you've been having.

Hope that helps.

Page lacks the HTML doctype, thus triggering quirks mode

You have a Doctype, but the key is in the phrase "The HTML Doctype" which is <!DOCTYPE html>.

You are using the Doctype for XHTML 1.0 Transitional, which is a legacy language. That Doctype triggers Almost Standards Mode instead of Standards Mode in a number of browsers where <!DOCTYPE html> would trigger Standards Mode.

See the Wikipedia article on Quirks mode for more details.

An aside: While you have declared that Doctype, I see a data-* attribute in your screenshot so you aren't following it. Use a validator.

What happens if we don't use !DOCTYPE html statement ? (on modern and old browsers)

According to W3 schools

All HTML documents must start with a <!DOCTYPE> declaration. The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.

Let's talk about the DOCTYPE history a bit

The early era of HTML was started from XML and all browsers were crazily developing it on their own and had individual HTML standards that made different rendering behaviors on browsers. It was really a hard time for most web developers.

And then W3C was established to standardize HTML for all websites, but the problem was how we can develop a new standard HTML but still keep the original HTML's behaviors on current web pages? They thought a new term for this backward compatibility which is Quirks mode, and DOCTYPE was born for new web standards, so most modern websites need DOCTYPE as the entry for understanding which HTML version developers writing to give consistent rendering across browsers.

Well, I think we have enough theory and history background, but with the human curiosity trait, I think it's not enough for us.

I can share a very good example of what will happen if you have and don't have DOCTYPE in your HTML.

Here is the code snippet

<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>The Transitional</title>
</head>

<body>
  <h1>Header</h1>
</body>

</html>

Why is it necessary to use doctype?

The best answer comes from MDN:

In the old days of the web, pages were typically written in two
versions: One for Netscape Navigator, and one for Microsoft Internet
Explorer. When the web standards were made at W3C, browsers could not
just start using them, as doing so would break most existing sites on
the web. Browsers therefore introduced two modes to treat new
standards compliant sites differently from old legacy sites.

There are now three modes used by the layout engines in web browsers:
quirks mode, almost standards mode, and full standards mode. In quirks
mode, layout emulates nonstandard behavior in Navigator 4 and Internet
Explorer 5 for Windows that is required not to break existing content
on the Web. In full standards mode, the behavior is (hopefully) the
behavior described by the HTML and CSS specifications. In almost
standards mode, there are only a very small number of quirks
implemented.

How do browsers determine which mode to use?

For HTML documents, browsers use a DOCTYPE in the beginning of the
document to decide whether to handle it in quirks mode or standards
mode. To ensure that your page uses full standards mode, make sure
that your page has a DOCTYPE like in this example:

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Hello World!</title>   
</head>
<body>
</body> 
</html>

The DOCTYPE shown in the example, , is the simplest
possible, and the one recommended by HTML5. Earlier versions of the
HTML standard recommended other variants, but all existing browsers
today will use full standards mode for this DOCTYPE, even the dated
Internet Explorer 6. There are no valid reasons to use a more
complicated DOCTYPE. If you do use another DOCTYPE, you may risk
choosing one, which triggers almost standards mode or quirks mode.

Make sure you put the DOCTYPE right at the beginning of your HTML
document. Anything before the DOCTYPE, like a comment or an XML
declaration will trigger quirks mode in Internet Explorer 9 and older.

In HTML5, the only purpose of the DOCTYPE is to activate full
standards mode. Older versions of the HTML standard gave additional
meaning to the DOCTYPE, but no browser has ever used the DOCTYPE for
anything other than switching between quirks mode and standards mode.

To answer your second question, it's recommended that you use the HTML5 doctype:
<!DOCTYPE html> which triggers standard mode in every browser (including IE6).

Why is the site running in IE quirks mode?

Sample Image

It's a Byte Order Mark, , which is invisible to most text editors. Try using VIM and killing it or somehow find a different text editor and kill everything before <!DOCTYPE html>

You can simply copy <!DOCTYPE HTML> and everything below it into a new file and save over it, meaning you wont be copying the BOM coming before it to resolve this issue; I've ran into it many times.

Quirks mode and doctypes

Start by validating the code, that will show you that there are some errors in the markup:

http://validator.w3.org/check?uri=http%3A%2F%2Fparkoura.tk%2Fashkon%2Fblog.php&charset=%28detect+automatically%29&doctype=Inline&group=0

For example, you have used <header> instead of <head>, you have mismatched tags, you have escaped a lot of quotation marks.

Fixing the worst errors will probably make the page work with a doctype also.

What is quirks mode?

you can read in this links
:

http://en.wikipedia.org/wiki/Quirks_mode

http://www.quirksmode.org/css/quirksmode.html

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

Modern browsers generally try to
render HTML content according to the
W3C recommendations. However, to
provide compatibility with older web
pages, and to provide additional
"intuitive" functionality, all
browsers support an alternative
"quirks mode".

Quirks mode is not, however, a
standard. The rendering of any page in
quirks mode in different browsers may
be different. Whenever possible, it is
better to adhere to the W3C standards
and try and avoid depending on any
past or present browser quirks.

Generally, quirks mode is turned on
when there is no correct DOCTYPE
declaration, and turned off when there
is a DOCTYPE definition. However,
invalid HTML - with respect to the
chosen DOCTYPE - can also cause the
browser to switch to quirks mode.

More information on the different
quirks modes in different browsers can
be found at QuirksMode.org

HTML5 maintains aspect ratio of images?

This "feature" is exclusive to quirks mode, in which html and body have 100% height, and the heights of top-level elements are made relative to body. In standards mode, html and body act as regular block boxes with auto heights. Since a percentage height cannot be relative to an auto height, height: 100% doesn't take effect and the image keeps its aspect ratio in standards mode.

This is also why body backgrounds display fully in quirks mode, but not in standards mode, when there isn't enough content to fill the page.

To get the quirks-mode behavior in standards mode, set height: 100% on the html element and min-height: 100% on the body element as described here.

Doctype and Quirk Modes and HTML 5