title: CSS not working at all in all browsers
body: <p>I'm building a simple website, and discovered that the while the CSS works fine in Chrome (which I usually work with), it doesn't at all in Firefox or IE. As in it's a blank white page with pictures and text, like I hadn't written any CSS. The HTML loads fine, but it's obvious that the CSS isn't being used at all. </p>
  
  <p>Here's all of my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;Apple Tree House&lt;/title&gt;
  &lt;link rel="stylesheet" type="css" href="stylesheet.css" /&gt;
  &lt;link rel="shortcut icon" href="root/icon.ico" type="image/ico" /&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="container"&gt;
  
  &lt;header&gt;
  &lt;img src="root/logo.png" id="logo" width="300px" height="300px"&gt;
  &lt;h2&gt;New Bed and Breakfast&lt;/h2&gt;
  &lt;h1&gt;Opening January 2015&lt;/h1&gt;
  &lt;h4&gt;Apple Tree House, Farndon Road, Woodford Halse, Northamptonshire&lt;/h4&gt;
  &lt;/header&gt;
  
  &lt;div id="textcontainer"&gt;
  ---Basic text info here---
  &lt;/div&gt;
  
  &lt;footer&gt;
  &lt;img src="root/footer.png" id="footbanner"&gt;
  &lt;/footer&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>html, body{
  margin: 0; 
  padding: 0;
  
  }
  
  body {
  background-color:#85A366;
  font-family:Arial, Helvetica, Sans-serif;
  font-size:12pt;
  margin:0 auto;
  padding-left:10px;
  padding-right:10px;
  
  }
  
  
  #container{
  width:80%;
  height:100%;
  padding-left:5px;
  padding-right:5px;
  padding-bottom:0px;
  padding-top:0px;
  text-align:center;
  color:black;
  background:#FFFFEE;
  margin:0 auto;
  font-family: Goudy Old Style,Garamond,Big Caslon,Times New Roman,serif;
  font-weight:600;
  font-style:italic;
  font-size:13pt; 
  color:#7D5833;
  
  }
  
  h1, h2, h3, h4, h5, h6 {
  color:#472400;
  }
  h1 { font-size: 40px; }
  h2 { font-size: 32px; }
  h4 { font-size: 24px; }
  
  #textcontainer{
  
  width:45%;
  text-align:center;
  margin:0 auto;
  top:auto;
  }
  
  footer{ 
  text-align:center;
  height:100px;
   }
  #footbanner { 
  max-width:100%;
  max-height:100%; 
  }
  
  @media screen and (max-width:420px) {
  table{
   font-size:8pt;
   }
   #container {
      width:100%;
      }
   }
  </code></pre>
  
  <p>Anything you can see in there that's making it work in Chrome but not at all in other browsers?</p>