HTML5 Support For IE7 & 8

UPDATE: As of February 2013 support for Internet Explorer 7 has been discontinued.

Our templates have a certain degree of support for IE7 + 8 (for more information read our support post about "HTML5 Templates & Browser Compatibility")

Whereby IE9+ browsers are fully supported as they have been developed to understand HTML5 by default as well as a wide range of CSS3 properties.

If you download one of our premium or free HTML5 templates and view the source code you probably will see something like this:

<!--[if lt IE 9]> <link rel="stylesheet" href="styles/ie.css" type="text/css"> <script src="scripts/ie/html5shiv.min.js"></script> <![endif]-->

The block above is a so-called "Conditional Comment" - conditional comments only work in Internet Explorer and are helpful to define specifications solely for IE.

The conditional comment above is set-up for all "IE" browsers that are less than version 9 - "if lt IE 9" = If the browser version is less than 9 use the following files.

What does this have to do with me you may think. Well this is actually very important if you wish to support users viewing your website using Internet Explorer 7 or 8 (we no-longer have any support for IE6 and below).

Depending on how you use our template depends on how you have to keep the path to the "IE" specific files.

When you create pages for your site using our template you always have to update the path to the individual files or images. The same applies for the conditional comment - this is forgotten in a lot of cases.

How you know that the IE specific files in a HTML5 template aren't correctly specified (other than the homepage), the template doesn't work correctly in IE7 or 8, it's that simple.

Referencing Files in The Conditional Comment

Using Relative File Paths

Pages in the root (e.g. homepage)
<!--[if lt IE 9]> <link href="styles/ie.css" rel="stylesheet" type="text/css"> <script src="scripts/ie/html5shiv.min.js"></script> <![endif]-->

Page in a folder
<!--[if lt IE 9]> <link href="../styles/ie.css" rel="stylesheet" type="text/css"> <script src="../scripts/ie/html5shiv.min.js"></script> <![endif]-->

Page in a folder that is also in a folder (2 levels deep)
<!--[if lt IE 9]> <link href="../../styles/ie.css" rel="stylesheet" type="text/css"> <script src="../../scripts/ie/html5shiv.min.js"></script> <![endif]-->

Note: here we use "../" in front of the file path, this indicates a folder depth e.g.:

  1. "../" = one folder / level
  2. "../../" = two folders / levels
  3. "../../../" = three folders / levels
  4. "../../../../" = four folders / levels
  5. "../../../../../" = five folders / levels
Using an Absolute File Path

Pages in the root (e.g. homepage), page in a folder, page in a folder that is also in a folder are all the same e.g.:
<!--[if lt IE 9]> <link href="http://www.DOMAIN.com/styles/ie.css" rel="stylesheet" type="text/css"> <script src="http://www.DOMAIN.com/scripts/ie/html5shiv.min.js"></script> <![endif]-->

In the example above, you can see that we have added the URL of the website to the file path. To note is, the word "DOMAIN" needs to be replaced with your own domain name.

Using The Base href Tag

Here we need to add a new element to the source code - between the <head></head> tag, preferably before the </head> element e.g.:
<head> <base href="http://www.DOMAIN.com/"> </head>

All pages that use the template have exactly the same "relative file path" in the conditional comment code e.g.:
<!--[if lt IE 9]> <link href="styles/ie.css" rel="stylesheet" type="text/css"> <script src="scripts/ie/html5shiv.min.js"></script> <![endif]-->

A full example could look something like this :
<!--[if lt IE 9]> <link href="styles/ie.css" rel="stylesheet" type="text/css"> <script src="scripts/ie/html5shiv.min.js"></script> <![endif]--> <base href="http://www.DOMAIN.com/"> </head>

In the example above, you can see that we have added the URL of the website to the "base" element. To note is, the word "DOMAIN" needs to be replaced with your own domain name.

The base tag simply adds the base URL of the site to all of the relatively linked elements, be it an image, a file or a link. Further information can be found here: W3C recommendation for the Base tag.

Conclusion

There are pros & cons to all three of the solutions that we have added here to show you the main ways to link to the IE specific files.

Simply put, the way you link to the file(s) all depends on your situation.

You can find a variety of information that supports all methods and their daily use situations on the Net, as well as information about the pros & cons of using one form instead of the other.

If you still want to support IE7 + 8 we suggest you always test your pages in both browsers before you go live with the files, if there is a problem check that you have the correct path to the files in the conditional comment.

If you use the "relative" method, check to make sure the amount of "../" is correct - simply count the amount of folders deep the page is and ensure that you have one "../" per folder in the file path. As shown in the example above.