IE9 css media queries not working properly...Works fine everywhere else

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...

The media query itself works. It's the styles that are giving problems. — BoltClock, Apr 27 '12 at 06:55
Yeah I noticed that too. The width is not getting set properly either. Any ideas about what could be causing the problem? — elclanrs, Apr 27 '12 at 06:57
Just in case, check this (the answer) : http://stackoverflow.com/questions/10305631/ie9-float-with-overflowhidden-and-table-width-100-not-displaying-properly/10305733#10305733 — Denys Séguret, Apr 27 '12 at 06:59
Sorry. couldn't test as I have no IE but I hoped I could help :( — Denys Séguret, Apr 27 '12 at 07:07
@elclanrs : The (max-width: 480px) constraint is not getting applied in IE because of which the styles are not getting applied in IE and so positioning remains unchanged. — Ankit, Apr 27 '12 at 07:14
That's weird...it should work. I solved my problem tho. I'll post the answer soon — elclanrs, Apr 27 '12 at 07:28
@tomByrer: The login form *is* the demo. This link should be less confusing: http://jsfiddle.net/elclanrs/BMz9U/ — thirtydot, Apr 27 '12 at 09:32
As a side note, it's recommended to use relative units on media queries (like `em`). Absolute units are weirdly handled by some mobile devices. — Alejandro García Iglesias, Nov 21 '12 at 19:05

score 2 · Accepted Answer · answered Apr 27 '12 at 07:34

2

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

answered Apr 27 '12 at 07:34

elclanrs

92,861
21
134
171

Thanks for the update! If you're interested, the "This field is required" bubble does not engage in IE8, which is used by around the same number of IE9 users now; about 12%, depending on who you listen to: http://gs.statcounter.com/#browser_version-ww-monthly-200807-201204 http://www.getclicky.com/marketshare/global/web-browsers/internet-explorer/ http://www.w3counter.com/globalstats.php – tomByrer Apr 27 '12 at 15:21
Works fine for me in IE8. Could you try again? – elclanrs Apr 27 '12 at 21:41
@elclanrs I posted a similar question [here](http://stackoverflow.com/q/16658482/703717) and I just now stumbled upon your question.So i tried moving the default code to another another media query like you suggest here...but that didn't seem to work. Any ideas? – Danield May 21 '13 at 07:32

score 0 · Answer 2 · answered Mar 06 '13 at 10:37

0

i have fixed this issue by adding a js file respond.src.js in the header

answered Mar 06 '13 at 10:37

arun kumar

1

IE9 css media queries not working properly...Works fine everywhere else

2 Answers2