IE8 Not Recognising HTML5 (even with shiv)

StackOverflow https://stackoverflow.com/questions/13850845

Question

I'm completely stuck on a really weird IE bug and non of the other posts about this issue seem to solve it. IE 8 isn't applying CSS styles to HTML5 tags on a site I've just launched. In the past I've always fixed this with a shiv and/or code like:

<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
 </script>
<![endif]-->

The website is http://www.unyouth.org.au/.

IE8 seems to recognise the header but as soon as it gets to the row of ASIDEs stops working.

Does anyone have any ideas why this is happening? Any help would be amazing.

Thanks so much!

Was it helpful?

Solution

Just figured this out, thanks @Sparky672 for pointing me in the right direction.

For anyone else having this problem the curve just below the coloured shards was created using an SVG. I was under the impression that if IE couldn't render the SVG it would just ignore it, however it seemed it was mucking up everything below it.

I haven't worked out how to remove the SVG for IE 8 down yet, because commenting it out with IE conditionals doesn't seem to work - but that's another issue. Removing it fixes the styling problem!

OTHER TIPS

I have a fix, wrap your inline SVG in the greater that IE9 if comment.

<!--[if gte IE 9]><!-->

    <svg id="svg-source" height="0" version="1.1" 
      xmlns="http://www.w3.org/2000/svg" style="position:absolute; margin-left: -100%" 
      xmlns:xlink="http://www.w3.org/1999/xlink">

    </svg>

<!--<![endif]-->

Explorer absolutely hates invalid HTML.

Your invalid HTML contains duplicate id's. Specifically, #site is used in both <header> and <footer>. Some browsers just take the first occurrence and ignore the rest.

Line 440, Column 18: Duplicate ID site. <footer id="site">

Line 97, Column 19: The first occurrence of ID site was here. <header id="site">

To resolve your SVG removal issue (after ensuring you have valid HTML) - apply the following code to the top of your page in replace of the standard <html>.

<!--[if lt IE 9]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->

This will apply the class "lt-ie9" to the whole page where the IE version is less than version 9. Any version, 9 or higher, will display the normal <html> without a class.

At this point, you have a class that you can use in CSS to remove any element for those browsers.

.lt-ie9 svg {display: none;} /* this will remove all SVG elements with the class */

*Disclaimer: It's been a while since I've tried this on IE8. It may only work if you wrap your SVG in a div.lt-ie9 and apply it to the parent instead - I can't remember what errors are thrown. I'd test it, but I'm on Ubuntu and no VM on this machine.*

NOTE: The method of using conditional IE comments in your parent elements - either <html> or <body> - is common, there are lots of variants. You should apply some research in this area and use a more general case than the one provided here. This will afford you the wider benefits of this technique as well as solving this issue specifically.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top