title: Responsive Site Not Working In IE (Despite css3-mediaqueries.js)
body: <p>I'm creating a Responsive Website but cannot seem to get it to work in IE (I'm testing in IE8). Now, I know that Internet Explorer 8 and below doesn't support CSS3 media queries. But I included the css3-mediaqueries.js Javascript file (hosted by Google) and it still doesn't work.</p>
  
  <p>I stripped out all the code leaving the very minimum (literally only 26 lines of HTML and a combined 34 lines of CSS). The HTML successfully validates as HTML5 and the CSS validates as CSS level 3. Here's the code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" /&gt;
  &lt;title&gt;Responsive Site&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/custom.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" /&gt;
  
  &lt;!--[if lt IE 9]&gt;
      &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  
  &lt;!-- css3-mediaqueries.js for IE less than 9 --&gt;
  &lt;!--[if lt IE 9]&gt;
      &lt;script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="wrapper"&gt;
      &lt;div id="article"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div id="side"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>custom.css:</strong></p>
  
  <pre><code>@charset "UTF-8";
  
  /*html5 display rule*/
  article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}
  
  body {margin: 0px; padding:0px}
  
  .wrapper {
      width:78%; 
      margin:0 auto}
  
  #article {
      float:left;
      width:61.224489795%;
      margin:20px 0 0 0;
      padding:0;
      height:500px;
      background-color:#000}
  
  #side {
      float:right;
      width:30.775510204%;
      margin:20px 0 0 0;
      padding:0;
      height:500px;
      background-color:#999}
  </code></pre>
  
  <p><strong>responsive.css:</strong></p>
  
  <pre><code>@charset "UTF-8";
  
  #article {
      width:100%}
  
  #side {
      width:100%;
      clear:left}
  </code></pre>