HTML5 validated by W3C (Working in Chrome, Firefox, Safari) Black screen in IE8

Question

Evening all.

I have created a basic HTML5 site. It validates in W3C validator. It seems to work fine in Chrome, Safari, Firefox etc. However, upon opening the page in IE8 I just get a black screen.

The site can be found at www.soultrainer.co.uk

I assumed I had missed a bracket out or something. However I am receiving 0 error messages in error consoles and looking through the code I can't see any errors.

Any help would be greatly appreciated.

P.S. I can also view the document tree in IE8 Developer Tools.

Thanks,
Gary

Answer 1

    #overlay{
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.8);           
    }

Maybe it's this? Try commenting certain stuff out and testing. You can easily find out what it is.

You seem to have CSS3 stuff for the body bg image as well. Try commenting that stuff out, maybe IE can't parse it properly.

Answer 2

You're missing the opening html tag at the top.

Answer 3

If you look at how IE has decided to parse this page using the developer tools, it's put everything into the head, and left the body an empty node.

This is because you open your head, but never close it ;) Removing the opening head (and also your closing body which has no opening) should sort this out, if not, just encase head content in head, and body content in body :)

A useful tool (still not 100% perfect) is the HTML Lint tool. It doesn't like your current structure, however if I copy it into the "Lint By Direct Input" tab, and remove the head and /body tag, then it's fine :)