5

My website was almost 100% done when I checked it to the W3C Validator. Got an error saying that I didn't declare a Doctype. So I added the HTML 5 <!DOCTYPE html> . OK, the error is gone. But why does the layout becomes so messed up like?

Please view it below.
http://itsdaffa.16mb.com/ --> Without Doctype
http://itsdaffa.16mb.com/error.html --> WITH Doctype

I have stumbled upon some answers about similar issues but couldn't really understand since mostly are their code's specific error. In this question for example, the user solved his problem by removing negative right property values while I don't have any in my code.
I am a complete beginner to this, in fact this is the first website I'm building from scratch. I desperately need help. Thanks :)

Community
  • 1
  • 1
Daffa Alif Pratama
  • 53
  • 5

1 Answers1

7

You will need to put this in your CSS:

html, body {
    height: 100%
}

The reason being when you add the doctype, then you are switching from quirks mode to standards mode. In standards mode the html and body elements do not default to 100% height.

See explanation here

Community
  • 1
  • 1
Jackson
  • 3,476
  • 1
  • 19
  • 29
  • Thanks! This solved my problem. Any idea why I can't only select the `body` and must include `html` as `height: 100%`? The question linked doesn't explain why it musts select the `html` tag too. Thank you. – Daffa Alif Pratama Jun 08 '15 at 00:30
  • Basically the body can only be as big as it's container (The HTML element). If you think of it like a pack of cards; The deck pack represents the html element, the cards represent the body element contained within the html. You will find it difficult to fit more than 52 cards into the deck pack. For that reason you would need to increase the size of the card pack. – Jackson Jun 08 '15 at 16:02
  • Thanks! Things started to great clear. But pardon my curiousity, in opposite, why I just can't select the `html` tag only? – Daffa Alif Pratama Jun 09 '15 at 06:57
  • Note that while this may have solved this particular problem, there are many more quirks that the Doctype does affect and may not solve everyone's problems with Doctype HTML. – Brad Ahrens Mar 13 '19 at 16:44