title: CSS wont load on IE8
body: <p>Im in the process of developing a site.  It's coming along well save the fact that none of the css works on IE8. Ive been reading around online and have had some trouble making sense of the various guides and hacks that offer a solution.  Any suggestion on how to make this start working? heres a snippet of code to help.  Thanks!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head style="overflow-x: hidden"&gt;
      &lt;script src="//cdn.optimizely.com/js/272026200.js"&gt;&lt;/script&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
      &lt;!--[if IE 8]&gt;
      &lt;link rel="stylesheet" type="text/css" href="ie8.css"&gt;
      &lt;![endif]--&gt;
      &lt;title&gt;Dupont Studios&lt;/title&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'&gt;
  
      &lt;script type="text/javascript" src="jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="waypoints.js"&gt;&lt;/script&gt;
  
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" /&gt;
      &lt;link rel="stylesheet" media="only screen and (min-width: 401px)" href="style.css" /&gt;
  
      &lt;script language="javascript" type="text/javascript"&gt;
          $(function() {
          // Do our DOM lookups beforehand
          var nav_container = $(".nav-container");
          var nav = $("nav");
          nav_container.waypoint({
          handler: function(direction) {
          nav_container.toggleClass('sticky', direction=='down');
  
          }
          });
          $("li.nav-item").click(function() {
          $("html, body").animate({
          scrollTop: $($(this).children().attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
          });
          return false;
          });
  
          });
  
      &lt;/script&gt;
  
  
  
  &lt;/head&gt;
  </code></pre>
  
  <p>More info:
  the ie8.css sheet is simply a copy of the style.css that I made as a test. I saw somewhere online that ending something in \9 could help.  Here's a snippet of the code.  In retrospect this seems quite dumb</p>
  
  <pre><code>body{
      font-family: 'Helvetica Neue', 'Helvetica Neue Light', sans-serif\9;
      margin:0\9;
  
  }
  
  #top-container{
      width:100%\9;
      height:100%\9;
  }
  
  #top-content{
      max-width:1200px\9;
      margin-right:auto\9;
      margin-left:auto\9;
  }
  
  #top-img{
      width:100%\9;
      padding-bottom: 10%\9;
  }
  </code></pre>