IE8 Not Recognising HTML5 (even with shiv)

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!

Answer 1

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!

Answer 2

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]-->