Implementing HTML5shiv properly?

1.1k Views Asked by Charlie Coplestone At 21 January 2015 at 01:43

After spending a while designing a website I've now decided I need to at least make it view-able in IE9 and below. I've followed examples from the below website:

https://github.com/aFarkas/html5shiv

but to no avail.

Here's how one of the sites pages looks in an up-to-date browser: http://gyazo.com/10a74b651a216d76bb677d335fa1551d

And here's how it looks in IE9 and below: http://gyazo.com/8541b263b9ed43e9d7dea9c33eafb22b

Strangely enough however, the homepage appears fine, it's just all of the others.

I implemented this code to the head of all of my html pages:

<!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
<![endif]-->

html5shiv.js being in a folder called 'js' in my project directory.

And added this CSS code the my stylesheets:

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

Even with this done, which I believe to be correct if I'm not being blind, IE9 and below don't display this site very well.

Any suggestions will be greatly welcomed.

Thank you.

Original Q&A

There are 1 best solutions below

Bryan Willis On 07 January 2016 at 17:29

I'm sure you already figured this out Charlie but in case you haven't I would try these things...

First, regarding the css:

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

↑ This should be included before your other css. Generally, you shouldn't need to do this as HTML5shiv already adds these styles, but for some older browsers or ones that have javascript disabled you could add these styles. It is easier in my opinion to just include normalize.css in your <head> beforehand.

Also, make sure HTML5shiv is being added to the head (preferably at the end). If it's loaded in the footer after page load it could cause issues like the one you describe.

Your code should look something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title><meta name="description" content="">
    <!-- CSS Reset -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet">
    <!-- Your site CSS (Optional ) -->
    <link rel="stylesheet" href="css/main.css">
    <!-- HTML5 shim for support of HTML5 elements (added at end of head) -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <![endif]-->
  </head>
  <body>

   You content here ....


  <!-- If you use javascript  -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  </body>
</html>

There are some known issues with html5shiv that can be found on the github page and if you still have issues you should report it here. Also, make sure you are using the latest version of the script.

Implementing HTML5shiv properly?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in CROSS-BROWSER

Related Questions in HTML5SHIV

Trending Questions

Popular # Hahtags

Popular Questions