CODEWITHSUNDEEP
htmldoctype
cc young
cc young

Reputation: 20255

<DOCTYPE html> versus <html> - rendering problems firefox and chrome

have been using no DOCTYPE but rather simply starting with <html> as per HTML5 standards (as I understood them). everything going ok.

began using Jade, which insists on DOCTYPE. using <!DOCTYPE html> - pages no longer render correctly(?).

as an easy and trivial example (behavior is same on firefox and chrome):

<html>
    <body >
        <div style='height:50%; background-color:pink;'></div>
        <div style='height:50%; background-color:blue;'></div>
    </body>
</html>

render just fine - have page pink, half blue

<!DOCTYPE html>
<html>
    <body >
        <div style='height:50%; background-color:pink;'></div>
        <div style='height:50%; background-color:blue;'></div>
    </body>
</html>

renders two skinny DIV's you can't see.

  1. what's going on?
  2. thought DOCTYPE was being deprecated for HTML5
  3. what should I be doing?

Upvotes: 12

Views: 11917

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

  1. Without a DOCTYPE, the page is rendered in Quirks Mode. This means dozens of oddities. The one you have encountered is #3 in my list of Quirks Mode phenomena: percentage heights for elements are applied, using the available height as reference, even when the enclosing block has height: auto (the default); by the specs, the height is determined by the require­ments of the content.
  2. No, DOCTYPE is not deprecated according to HTML5 drafts – on the contrary, it is required, but any form other than <!DOCTYPE html> is declared obsolete.
  3. For new pages, design them to work in “Standards Mode” (and of course use <!DOCTYPE html>). For old pages, it depends.

In the given case, to make the browser’s rendering area divided in the intended way, set the height of the html and body elements, thereby making percentage heights apply to elements inside the body even in “Standards Mode”:

<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

Upvotes: 16

codeandcloud
codeandcloud

Reputation: 55333

Whoever who told you that DOCTYPE is deprecated is either playing a prank on you or is plain ignorant.

W3C on its article HTML5 differences from HTML4 on the section Syntax, sub section 2.2 clearly states this.

The HTML syntax of HTML5 requires a doctype to be specified to ensure that the browser renders the page in standards mode. The doctype has no other purpose and is therefore optional for XML. Documents with an XML media type are always handled in standards mode. [DOCTYPE]

The doctype declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax. Doctypes from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD. With HTML5 this is no longer the case and the doctype is only needed to enable standards mode for documents written using the HTML syntax. Browsers already do this for <!DOCTYPE html>.

And as to, why the behavior when you set <!DOCTYPE html> in your example.

This behavior is expected. This is because body is a block level element. So it has height, by default, in a shrink-to-fit model and width, by default, in an expand-to-fit model. Setting style="height:100%;" in the body tag allows body to take up the whole of the height available and displays your two divs.

Upvotes: 15

sync
sync

Reputation: 5650

I'm not sure why those DIVs were showing up before your change.

But your DOCTYPE declaration is correct for HTML5 - see http://www.w3.org/TR/html5-diff/#doctype .

And, if you add height: 100% to HTML and BODY you'll see those elements. They're taking up 50% of their container's height, which is 0, so their height is also 0. See http://jsfiddle.net/sync/EUXTY/ .

Upvotes: 2

Related Questions