Question

Check out this fiddle 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.

This is my current 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;
  }
}

What could be the problem? I can’t seem to figure it out. IE9 is the only one that doesn’t work as expected…

Answer 1

I fixed it. It seems like there were two things causing problems with IE. First I moved the default code for errors to another another media query for 481 and more:

@media screen and (min-width: 481px) {
  #my-form .error {
    position: absolute;
    width: 150px;
    right: -171px;
    margin-right: -20px;
    top: 50%;
  }
}

And then I used floats instead of inline-block. Seems like IE still has problems with inline-block:

@media screen and (max-width: 480px) {
  #my-form label {
    text-align: left;
    display: block;
    padding-bottom: .3em;
  }
  #my-form .error {
    float: left; // Here
    clear: left;
    top: 100%;
    margin-top: 4px;
    width: 200px;
  }
}

Demo: http://jsfiddle.net/elclanrs/BMz9U