HTML 5 - HTML not seeing CSS in IE7/IE8?

Question

I have created a website using HTML 5 with resolution tags for a wide and medium layout. When testing my website I found that it works in IE9, chrome, firefox, safari but not IE8 and older. The CSS links I have used are below;

<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel='stylesheet' media='screen and (max-width: 900px)' href='medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='wide.css' />

Currently upon opening the website, it has no divs or styling therefore I believe it has something to do with linking to the CSS style sheets. I have used div tags within my html;

Example:

<div id ="container">
    <div id ="header">
        <div id = "logo">
            <img src="images/Logo.jpg" height = "180" width = "300" alt = "Oops!">
        </div>                
        <div id = "small-logo">
            <img src="images/SmallLogo.jpg" alt = "Oops!">
        </div>        
    </div>

I am not an expert and any information would be extremely helpful.

EDIT:

I have tried using:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script >
<script type='text/javascript' src='resolution-test.js'></script>

Using javascript:

function adjustStyle(width) {
  width = parseInt(width);
  if (width < 900) {
    $("#size-stylesheet").attr("href", "medium.css");
  } else {
    $("#size-stylesheet").attr("href", "wide.css"); 
  }
}

$(function() {
  adjustStyle($(this).width());
  $(window).resize(function() {
    adjustStyle($(this).width());
  });
});

The webpage is now only seeing the style sheet? Are there any problems with this code?

[IE8 support for CSS Media Query](http://stackoverflow.com/questions/5769493/ie8-support-for-css-media-query). — Vucko, May 09 '13 at 10:29
@Vucko Not true. Many features of CSS3 won't work in IE8 or older, but that wouldn't stop all styles from rendering. Also, LaurenA didn't specify CSS3. — Maloric, May 09 '13 at 10:31
@Maloric yes I know, I was thinking of _media-querys_, but I wrote wrong. I edited the comment. — Vucko, May 09 '13 at 10:33
FYI : SEO Speaking, your `alt`s should not be oops but something that descripes the photo. — eric.itzhak, May 09 '13 at 10:33
Looks like Vucko hit the nail on the head - the media query seems the most obvious culprit. — Maloric, May 09 '13 at 10:39
@eric.itzhak this a prototype website, its not completely finished and is being used as an educational project. — LaurenA, May 09 '13 at 10:39
@Vucko I am using CCS 3/HTML 5. Is there any javascript to use that would enable it to be backward compatible to IE8 and older? — LaurenA, May 09 '13 at 10:40
@LaurenA I personally use [respond.js](https://github.com/scottjehl/Respond). — Vucko, May 09 '13 at 10:44

score 3 · Answer 1 · edited May 23 '17 at 10:25

You are using CSS3 media queries inside the media attributes of your link tags, they are not supported by IE8 and older versions. That would be the reason why the stylesheets aren't loading in IE8 and older.

Edit

As mentioned in the answer by Colin Bacon below, you can use Respond.js to make things work for you. I'm just adding it here as you seem to be overlooking the mentioned option. All you would need to do is add the following line in your head section preceding your link tags (replace the src attribute value with the path to your hosted copy of respond.js):

<script src="/path/to/respond.proxy.js"></script>

And things will start working for you from IE6 up to IE8, it is by far the easiest fix for your problem.

score 3 · Answer 2 · edited May 09 '13 at 10:56

3

As stated by other answers, CSS3 media queries are not supported in IE8 and below. If you need them to work you can use this polyfill by Scott Jehl.

Respond.js

edited May 09 '13 at 10:56

Mathijs Flietstra

12,900
3
38
67

answered May 09 '13 at 10:38

Colin Bacon

15,436
7
52
72

score 0 · Answer 3 · answered May 09 '13 at 10:32

0

CSS3 media queries are not supported in IE8 and lower.

check this support matrix:

http://caniuse.com/css-mediaqueries

answered May 09 '13 at 10:32

Simon McLoughlin

8,293
5
32
56

Rob Willis · Answer 4 · 2013-05-09T10:46:33.930

0

Media queries were not supported in IE before version 9 but you can use IE conditional comments to specify an additional stylesheet that would be loaded in older versions of IE:

e.g.

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="old-ie.css" />
<!--<![endif]-->

However you cannot specify the screen size in these comments, but you could have some Javascript that detects the screen size and loads the correct stylesheet (ideally the script would be in an alternative file) e.g.

<!--[if lt IE 9]>
<script type="text/javascript">
    if (screen.width< 901) { 
        document.write('<link href="medium.css" type="text/css" rel="stylesheet"/>');
    } else { 
        document.write('<link href="wide.css" type="text/css" rel="stylesheet"/>');
    }
</script>
<!--<![endif]-->

edited May 09 '13 at 10:46

answered May 09 '13 at 10:37

Rob Willis

4,706
2
28
20

I have tried to use an external javascript file.. I have updated my question to show what i've used. It still isn't seeing the style sheets medium.css and wide.css. Are there any problems with the code i have used? – LaurenA May 09 '13 at 11:16
Have you declared a 'style' element with Id of 'size-stylesheet' as that is what the jQuery code is looking for. – Rob Willis May 09 '13 at 11:22
Also reloading the CSS whenever the resize event is called would be quite inefficient, you could store the window size whenever the resize event is handled and only reload the CSS when the size moves above/below 900px. – Rob Willis May 09 '13 at 11:24
Also the resolution-test.js and – Rob Willis May 09 '13 at 11:33
The respond.js solution recommended by Colin Bacon looks like it would be a simpler solution – Rob Willis May 09 '13 at 11:57

HTML 5 - HTML not seeing CSS in IE7/IE8?

4 Answers4