title: Media query ignored for one element but displayed for another
body: <p>I am using media queries to target 2 screen sizes:
  1366px and smaller, and 1367px - 1920px.</p>
  
  <p>Now below is my code. </p>
  
  <p><strong>The problem</strong> is that the #header element is being read fine by the browser, but for some reason the #footer element is displaying css rules for the <strong>1366px query only</strong>, even when the screen size is 1920 px...This is in Chrome and FF.</p>
  
  <p>Why is this?</p>
  
  <pre><code>@media screen and (max-width: 1920px) and (min-width: 1367px){
      #header{
          position: absolute;
          background: url('../images/back_1920_top.jpg') no-repeat left top;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          height: 362px;
          width:100%;
          top:0;
          left:0;
          margin: 0 auto;
      }
  
      #footer{
          position:absolute;
          bottom:0;
          width:100%;
          height: 552px;
          background: url('../images/back_1920.jpg') no-repeat right bottom;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
      }
  }
  
  
  @media screen and (max-width: 1366px){
      #header{
          position: absolute;
          background: url('../images/back_1280_top.jpg') no-repeat left top;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          height: 245px;
          width:100%;
          top:0;
          left:0;
          margin: 0 auto;
      }
  
      #footer{
          position:absolute;
          bottom:0;
          width:100%;
          height: 300px;
          background: url('../images/back_1280.jpg') no-repeat right bottom;
          -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
      }
  }
  </code></pre>
  
  <p><a href="http://www.federalestene.co.za/" rel="nofollow">HERE</a> is a link to my site</p>
  
  <p>NOTE: You will see the issue in the header and footer background image - The header background image on a 1920 screen is showing the <strong>back_1920_top.jpg</strong> image, but the footer is still showing the <strong>back_1280.jpg</strong> image...It is suppose to show the <strong>back_1920.jpg</strong> image...</p>