CODEWITHSUNDEEP
htmlcssinternet-explorer-8
CloudSurferUK
CloudSurferUK

Reputation: 95

Why aren’t my HTML5 tags being styled in IE8 when I’ve applied HTML5 shiv?

I’ve got an issue with IE8 and HTML5. Despite using HTML Shiv, it doesn't seem to be resolved.

Basically the site is rendering fine on all browsers except IE8 & lower. In IE8 or lower the tags just get closed off and no styles are applied at all, ergo I guess the tags are not being recognized. However with the html5 shiv applied I can’t understand why it isn’t working.

(P.S. Yes I know similar questions have been asked. However they seem to be resolved with the HTML5 JS which I have already applied.)

The HTML is:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--[if lt IE 9]>
         <script type="text/javascript" src="_resources/js/iehtml5.js"></script>
<![endif]-->
<link rel="stylesheet" href="_resources/css/common.css" />
<script type="text/javascript" src="//use.typekit.net/yff7tzw.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- Page Header Section -->    
<header>
    <img src="_resources/files/logo.gif" alt="" />
</header>
<!-- Body Section -->
<main>
    <section>
        <h1></h1>
        <p></p>
    </section>

    <section>
        <h1></h1>
        <p></p>
    </section>

</main>
<!-- Footer Section -->
<footer>
    <h1></h1>
  <p></p>
</footer>
</body>
</html>

and the CSS is

article,
aside,
figure,
footer,
header,
main,
hgroup,
nav,
section { display: block; }

body {
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #fff;
}

main {
    margin-left: auto;
    margin-right: auto;
    width: 67.5em;
    background-color: #000;
    padding: 1em;
}

h1 {
    font-family: "museo-sans",sans-serif;
    font-weight:700;
    color:#67862d;
    text-align:center;
    padding-left:8em;
    padding-right:8em;
}

h2 {
    font-family: "museo-sans",sans-serif;
    font-weight:700;
    color:#67862d;
    text-align:center;
    padding-left:8em;
    padding-right:8em;
}

header  {
    margin-left:auto;
    margin-right:auto;
    width:69.5em;

}

header img  {
    margin-left:auto;
    margin-right:auto;
    padding:1.5em;
    display:block;
}

section  {
    margin-left:auto;
    margin-right:auto;
    width:67.5em;
    background-color:#000;
}

section p {
    font-family: "museo-sans",sans-serif;
    font-weight:100;
    color:#FFFFFF;
    text-align:center;
    padding-left:8em;
    padding-right:8em;
}

section iframe {
    width:44.6em;
    height:22.8em;
}

footer {
    margin-left:auto;
    margin-right:auto;
    width:69.5em;
    height:21.75em;
    text-align:center;
    background-color:#3d3d3c;
}

footer p {
    font-family: "museo-sans",sans-serif;
    font-weight:700;
    font-size:1.2em;
    color:#67862d;
    text-align:center;
    padding-left:8em;
    padding-right:8em;
    margin-bottom:-0.8em;
}

    footer span {
    font-family: "museo-sans",sans-serif;
    font-weight:700;
    color:#ffffff;
    text-align:center;
}

footer img { padding-top:1.5em; }

footer h1 {
    font-size:1.6em;
    margin-bottom:-0.4em;
}

footer h2 {
    font-family: "museo-sans",sans-serif;
    font-weight:700;
    color:#67862d;
    text-align:center;
}

Upvotes: 0

Views: 152

Answers (1)

user2428118
user2428118

Reputation: 8104

Depending on your security settings, Internet Explorer will not execute JavaScript in local files. An exception are files with a Mark of the Web.

You can change this behavior with the following setting: Allow active content to run in files on My Computer

If Internet Explorer has even more strict settings, it may not allow JavaScript on any web site. If that is the case, you can enable JavaScript in Internet Explorer with these instructions.

Upvotes: 1

Related Questions