6

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!

Tom Maitland
  • 568
  • 5
  • 17
  • 1
    Your site has duplicate `id`'s among [other invalid HTML](http://validator.w3.org/check?uri=http%3A%2F%2Fwww.unyouth.org.au%2F&charset=%28detect+automatically%29&doctype=Inline&group=0). – Sparky Dec 13 '12 at 00:11
  • You fixed the invalid code, but did you make sure to dump your IE browser cache when re-testing? Also, are you using a real version of IE 8, or some kind of tester, mode, etc? – Sparky Dec 13 '12 at 00:25

4 Answers4

5

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!

Tom Maitland
  • 568
  • 5
  • 17
3

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]-->
unclejam
  • 341
  • 2
  • 11
0

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

Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • Thanks! I've swapped the
    ID so that issue isn't there and doesn't seem to have fixed it though. There doesn't seem to be any other serious validation issues except for images not having ALT tags, which surely wouldn't do this?
     – Tom Maitland Dec 13 '12 at 00:22
  • @TomMaitland: No, I would not expect those minor issues to have anything to do with this. However, I never take any chances with IE and always strive to achieve 100% perfect HTML validation. – Sparky Dec 13 '12 at 00:24
  • Just made the site 100% valid HTML5 to see if that helped, doesn't have seemed to. I've been dumping my browser cache and have been testing on IE9 but in IE8 mode. – Tom Maitland Dec 13 '12 at 00:38
  • @TomMaitland: I honestly have no idea, but I do know that testing in IE 8 mode in IE 9 is not what you think. It's called "compatibility mode" because it's meant for viewing older websites that may not render properly in IE 9. However, [Microsoft does provide these free hard drive images specifically for website testing](http://www.microsoft.com/en-us/download/details.aspx?id=11575). – Sparky Dec 13 '12 at 00:45
  • 1
    Turned out to be an SVG that was blocking everything for whatever reason. When I remove it it fixes. Thanks so much. That's also a really useful heads up about the hard drive images. – Tom Maitland Dec 13 '12 at 00:49
0

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.

Darren L
  • 94
  • 3