css media query not working in firefox
<p>I am new to CSS media queries and trying to learn it. The following html code show the red background in Firefox whereas it is green in chrome on a 1400 X 1050 resolution. Can someone please tell me what is wrong here</p>

<pre><code>    &lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;style&gt;
        @media screen and (min-height: 901px) and (max-height: 1050px){
            body{
                font-size: 17px;
                background:green;
            }
        }
        @media screen and (max-height: 900px){
            body{
                font-size: 27px;
                background:red;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    TEST
&lt;/body&gt;
&lt;/html&gt;
</code></pre>