Export to GitHub

css3-mediaqueries-js - issue #4

HTML5 tags in IE7 with fixed width invisible on initial load

Posted on May 2, 2011 by Massive Ox

What steps will reproduce the problem? 1. Create container around page content with a fixed width (#container { margin: 0 auto; width: 960px }

  1. Make sure to use HTML5 elements inside the #container (<header> and <footer> for example)

  2. Load the page in IE7. Upon initial load, the header and footer do not appear. Only once you move the mouse INTO the content window (<html> or <body>) do the header and footer reappear.

What is the expected output? What do you see instead? Expect these elements to load in, but instead they are not present. Almost like if visibility has been set to hidden. Content retains layout, but is just invisible.

What version of the product are you using? On what operating system? There is no specific version stated, so version as of 5/2/2011. Issue is only on Windows IE7. Works fine in IE8.

Please provide any additional information below. Initially encountered problem when setting a fixed width to the #container using a media query once the width of the window hit 975px. Started out with width 100% and once window width hit 975px, I changed the width to 960px. If I kept the width set to 100%, regardless of window width, header and footer showed up fine. Only when I set a fixed pixel width does issue arise.

I tried eliminating all unnecessary styles and all media queries, and issue still occurred. Only after I removed the css3-mediaqueries-js script, did the #container size to 960px and header and footer showed up fine.

My only guess is there's an issue w/ IE7 and the css3-mediaqueries-js when initially loading, even if NO media queries are being declared in the CSS.

Note: I am using Modernizr to activate HTML5 elements in IE, etc.

Sorry for the long-winded description :\

Comment #1

Posted on Sep 21, 2011 by Grumpy Rhino

I had the same issue. No longer able to use css3-mediaqueries. This should really have higher priority considering the number of people using the HTML5 boilerplate and other CMS templates built with Modernizr.

Comment #2

Posted on Sep 29, 2011 by Grumpy Horse

This bug happens in Chromium 16.0.891.0 as well.

Comment #3

Posted on Apr 4, 2014 by Happy Ox

Back from the dead... There is a new version of the script. It has some CSS parsing and processing improvements. If you're still using it, or would like to try again, could you confirm that this issue is solved or not?

Status: New

Labels:
Type-Defect Priority-Medium