Browser display website in Quirks mode

I started learn OOP and PHP patterns and I got some troubles using MVC. I have following files:

index.php

<?php
    include_once("controller/controller.php");

    $controller = new Controller();

    $controller->view->display();
?>

controller.php

<?php
    class Controller
    {
        public $view;

        public function __construct()
        {
            include_once("view/view.php");
            $this->view = new View();
        }
    }
?>

view.php

<?php
    class View 
    {
        public $layout = "layout/layout.html";

        public function display()
        {
            include $this->layout;
        }
    }
?>

layout.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dokument bez tytułu</title>
    <style>
      body {
        background-color:#0066CC;
        margin:0;
        padding:0;
      }
      #page {
        background-color:#000;
        width:960px;
        height:650px;
        margin:0 auto;
      }
    </style>
  </head>
  <body>
    <div id="page"></div>
  </body>
</html>

Anyone could explain me why browser display this website in Quirks mode? The worst thing in this is margin at the top of screen, which is really annoying. I would be glad for any information about this problem and solution.

Solution

It looks like a valid HTML5 DOCTYPE.

Make sure your PHP files don't have any extraneous spaces or newlines before the opening <?php . In your text editor, make sure you are saving them as UTF-8 without BOM . On windows, by default, many text editors will insert a BOM (byte order marker), which could be causing garbage to be sent to the screen as the first line of the file. Any content before the DOCTYPE will trigger quirks mode.

Also, I think the style tag should be <style type="text/css">