Website working in Chrome / Firefox but not in Internet Explorer

Question

I've recently put up a new website at www.matmetzner.co.uk , it was designed with Chrome as my default browser, and seems to work fine in Firefox too, but IE gives me just the background image. I'm a games designer by trade and know a little web design, but I'm certainly no expert in this area as you can probably tell.

Can anyone see anything in my source code that might be causing it?

Sorry the question is a little vague but because none of it works, it's difficult to see the point of the break and therefore know which specific bit to try and fix.

Thanks in advance.

Solution 1

To start with I would add below to your head section-

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

Which might fix some problems. I'm not going to go into details about what this meta tag does. Please have a look at here or google it. Also use a CSS reset to bring all the browser defaults to a standard.

Then address individual differences and treat them for IE. Also remember to use conditional styles sheets (only if things started getting a bit difficult). Last but not the least remember a website doesn't need to look same in all the browsers as long as it doesn't compromise the usability and purpose of the website.

Hope this helps

Solution 2

You also don't close your style tag

<style type="text/css">
<!--                                      < - BEGIN OF COMMENT
body {
    background-image: url(img/grass.jpg);
    background-repeat: repeat-y;
}


#website {
    position:absolute;
    width:211px;
    height:24;
    z-index:1;
    left: 799px;
    top: 3px;
}
.style1 {color: #FFFFFF}
</style>                                   < - COMMENT NEVER ENDED, SO TAG NOT READ?

From here IE is actually assuming it is still reading your style tags. Even though you are already presenting content.