title: Media queries not working in IE8 - even with respond.js work-around
body: <p>My site consists of 5 divs (represented by green boxes). There should be
  3 per row, and you can view my demo site here: <a href="http://testsite24.netai.net/public/demo.html" rel="nofollow noreferrer">http://testsite24.netai.net/public/demo.html</a></p>
  
  <p>IE 8 doesn't support media queries, but I'm using respond.js as a work-around. I can't get it to work though.</p>
  
  <p>the media queries I'm using are:</p>
  
  <pre><code>@media screen and (max-width: 1320px){
  
  .block{
      width: 45%;    
      margin: 0 15px;
      margin-bottom: 30px;
      min-height: 670px;
      max-height: 670px;
      overflow: hidden;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;    
  /*    border: 1px solid red;*/
  }
     }
          @media screen and (max-width: 772px){
  
      .block{
      width: 100%;    
      margin: 0 15px;
      margin-bottom: 30px;
      min-height: 710px;
      max-height: 710px;
      overflow: hidden;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;    
  /*    border: 1px solid red;*/
  }
      }
  </code></pre>
  
  <p>where .block applies to the green div boxes. These work fine except in IE8.</p>
  
  <p>I'm calling on respond.js after all my css, just before the  tag like this:</p>
  
  <pre><code>&lt;script src="http://testsite24.netai.net/public/js/respond.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>but when I view the page in IE 8, it doesn't respond to the queries, </p>
  
  <p>here is a screenshot in IE8:</p>
  
  <p><img src="https://i.stack.imgur.com/w62xw.png" alt="ie8"></p>
  
  <p>and here is one for IE 9 (correct):</p>
  
  <p><img src="https://i.stack.imgur.com/eM2VW.png" alt="ie9"></p>
  
  <p>What's wrong?? Thanks for your help!</p>