Search code examples
htmlcsshtml5shiv

HTML5 Shiv Conflict in IE 7 & 8


What I'm trying to do I am trying to use HTML5 shiv to alow for HTML5 elements to work in IE. I have used this in two other instances with no problem.

What I'm doing I have included this script in my header immediately after opening my header tag before all other scripts are loaded.

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

I have also included in my CSS the standard display: block style to these HTML5 elements.

What is Happening This however is not working in IE 7 & 8. The elements are not rendered. From what I have read HTML5 Shiv can be pretty strict on its tags. So for example, my tag loads as such:

<html lang="en" jQuery19109983433033032547="1">

My body tag also loads as this:

<body class="sitedefault">

I have kept my version of JQuery loading consistent, have followed other directions I have read pertaiing to HTML5 Shiv as I have in my prior implementations of this but am still hitting this snag. Any help at this point would be incredibly appreciated!

I have also tried hosting the Shiv file locally with no luck.

Here is how the source looks in IE8:

<!DOCTYPE HTML>
<html lang="en" >
<head>
<!-- Pano-Framework Requirements Start //-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/script/respond.min.js"></script>
<link type="text/css" rel="stylesheet" href="/styles/pano-framework.css" />
<!-- Pano-Framework Requirements End //-->

There is plenty of stuff loading after this but that's the first section of my . I am at a complete loss as to why this isn't working.

Update I have found that IE is loading this stylesheet at the very top of my section which could explain this issue:

article {
    DISPLAY: block
}
aside {
    DISPLAY: block
}
dialog {
    DISPLAY: block
}
figcaption {
    DISPLAY: block
}.....

It loads like this:

<style>CSS Stylesheet</style>

I am not sure what is loading this or why it is loading in this spot above the HTML5shiv? Any ideas?


Solution

  • So I got this to work but I'm not entirely sure what I changed to trigger the fix. My final code, however it this:

    <!-- Pano-Framework Requirements Start //-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="http://staging.new.informationweek.com/styles/pano-framework.css">
    <script src="/script/respond.min.js"></script>
    <!-- Pano-Framework Requirements End //-->
    

    The biggest difference I see is my tag pulling in my stylesheet.

    I appreciate the help everybody!