title: IE9 css media queries not working properly...Works fine everywhere else
body: <p>Check out this <a href="http://jsfiddle.net/elclanrs/BMz9U/embedded/result/" rel="nofollow">fiddle</a> in IE9 and try resizing the browser. As you can see the error message doesn't work properly. It works fine in Webkit, Firefox and Opera so far.  </p>
  
  <p>This is my current code:</p>
  
  <pre><code>@media screen and (max-width: 480px) {
    #my-form label {
      text-align: left;
      display: block;
      padding-bottom: .3em;
    }
    #my-form .error {
      position: inherit;
      display: inline-block;
      left: 0;
      top: 100%;
      margin-top: 4px;
      width: 200px;
    }
    #my-form .error:after {
      content: "";
      position: absolute;
      top: 0;
      margin-top: -16px;
      left: 50%;
      margin-left: -8px;
      border-style: solid;
      border-width: 8px 8px 8px 8px;
      border-color: transparent transparent #313b53 transparent;
    }
  }
  </code></pre>
  
  <p>What could be the problem? I can't seem to figure it out. IE9 is the only one that doesn't work as expected...</p>