CODEWITHSUNDEEP
htmlcssinternet-explorer
Jon
Jon

Reputation: 8531

Only IE Cannot View This Site

I am starting to build a website, but it seems that every browser except for IE can view it. I am confused as to why this is happening, and any insight into my problem will be greatly appreciated.

Link to website

HTML:

<html>
<head>

    <link rel="stylesheet" type="text/css" media="screen" href="css/stickyFooter.css" />

</head>
<body>

<div id="wrap">

    <header>
        <div id="header"></div>
        <div id="banner"></div>
        <div id="nameplate"></div>
        <div id="whiteLine"></div>

    </header>

    <div id="body">body</div>

    <div class="push"></div>

</div>

<footer>footer</footer>

</body>
</html>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
    background: url(../image/core/background.jpg) repeat-x center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


header div#header {
    background: url(../image/core/header.png) repeat-x;
    height: 61px;
}

header div#banner {
    background: url(../image/banner/01.jpg) no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 300px;
}

header div#nameplate {
    background: url(../image/core/nameplate.png) no-repeat;
    height: 140px;
    width: 1000px;
    margin: -340px auto 0 auto;
}

header div#whiteLine {
    background: url(../image/core/stripe.png) repeat-x;
    height: 1px;
    margin: 200px 0 0 0;
}

#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -61px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 61px; /* .push must be the same height as .footer */
}

footer {
    background-color: red;
}

Upvotes: 0

Views: 139

Answers (3)

Funk Forty Niner
Funk Forty Niner

Reputation: 74217

My 2 cents. Since some of the people for whom I build pages for, still use (groan) IE7, therefore I have to code to make the "client" happy, first and foremost. So I make my code work for IE7 right off the bat, then if it works in FF etc., it's gravy. <footer></footer> as far as I know, is not supported for older IE. Piece of advice, if you're gonna want to use a "footer" tag, use an "include" statement in .php or .shtml formats, and is easier to change later on; from experience. Code for worse case scenario. Cheers~

Upvotes: 1

Oliver
Oliver

Reputation: 2864

That's quite normal, that webpages don't work on IE.

Seriously ... take a look at http://code.google.com/p/html5shim/ if you are using a version prior to IE9.

Upvotes: 1

Undefined
Undefined

Reputation: 11431

You need to add a doctype

See this warning from F12 developer tools

HTML1113: Document mode restart from IE9 Standards to Quirks

View this for more information - http://www.javascriptkit.com/howto/doctype.shtml

Upvotes: 3

Related Questions