CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
Joe B.
Joe B.

Reputation: 111

Responsive Site Not Working In IE (Despite css3-mediaqueries.js)

I'm creating a Responsive Website but cannot seem to get it to work in IE (I'm testing in IE8). Now, I know that Internet Explorer 8 and below doesn't support CSS3 media queries. But I included the css3-mediaqueries.js Javascript file (hosted by Google) and it still doesn't work.

I stripped out all the code leaving the very minimum (literally only 26 lines of HTML and a combined 34 lines of CSS). The HTML successfully validates as HTML5 and the CSS validates as CSS level 3. Here's the code:

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

</head>
<body>
<div class="wrapper">
    <div id="article">&nbsp;</div>
    <div id="side">&nbsp;</div>
</div>
</body>
</html>

custom.css:

@charset "UTF-8";

/*html5 display rule*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}

body {margin: 0px; padding:0px}

.wrapper {
    width:78%; 
    margin:0 auto}

#article {
    float:left;
    width:61.224489795%;
    margin:20px 0 0 0;
    padding:0;
    height:500px;
    background-color:#000}

#side {
    float:right;
    width:30.775510204%;
    margin:20px 0 0 0;
    padding:0;
    height:500px;
    background-color:#999}

responsive.css:

@charset "UTF-8";

#article {
    width:100%}

#side {
    width:100%;
    clear:left}

Upvotes: 7

Views: 14273

Answers (4)

evan toder
evan toder

Reputation: 31

<meta http-equiv="X-UA-Compatible" content="IE=9">

You must place that before any other meta tags.

Upvotes: 0

josh.chavanne
josh.chavanne

Reputation: 329

In addition to the inability to use @imported stylesheets (which is documented on the github and google code project) - there is a problem if one does not explicitly state the media query in a format similar to:

@media screen and (min-width: 666px) and (max-width: 1000px)

compared to:

@media and (min-width: 666px) and (max-width: 1000px)

please look at this issue in the github issues section for this project - after about an hour of trying to set this up - the lack of screen in my media-queries was causing them to not be recognized.

Upvotes: 6

Joe B.
Joe B.

Reputation: 111

I finally figured it out! And only a few lines of code had to change.

A friend pointed out that the documentation for the css3-mediaqueries.js Javascript file reads:

Note: Doesn't work on @import'ed stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the and elements.

I was using the media attribute in the link element in my HTML file. So, here's what I did to resolve the issue:

In the HTML file I removed:

<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />


And replaced it with:

<link rel="stylesheet" type="text/css" href="css/responsive.css" />


I then added the media attribute to my responsive.css file:

@charset "UTF-8";
@media screen and (max-width: 800px) {
#article {
    width:100%}

#side {
    width:100%;
    clear:left}
}

But it still didn't work. I then changed the ordering of the media and @charset attributes in my responsive.css file. I simply rearranged lines 1 & 2:

@media screen and (max-width: 800px) {
@charset "UTF-8";

That did the trick. Not sure exactly why the ordering of the character set makes a difference? Perhaps someone can shed some light on it.

Thanks David for the useful suggestions! It's good to have several option in the tool shed and I may turn to respond.js in the future. But for now, I am happy with the code that Google is hosting.

Upvotes: 4

David Taiaroa
David Taiaroa

Reputation: 25485

Have you tried respond.js ?

Good luck!

Update

It may be safer to combine your two CSS files into one. Add the mobile specs into your custom.css file with: 

@media (min-width: 50px) and (max-width: 800px) {  

  /* mobile CSS here */

} /* close @ media for mobile */

Upvotes: 1

Related Questions