Geen weergave in ie7, ie8 en ie9

**bert vanhees** · 25-03-2013, 11:55

Beste,

Ik heb een probleem voor mijn eindwerk die ik morgen al moet afleveren op school.
Het is zo dat mijn site heel goed werkt in alle laatste nieuwe browsers alleen op IE7 t/m IE9 zie ik totaal geen site, enkel de achtergrond wordt getoond. Kan iemand mij hierbij helpen?

Wij moeten werken via XHTML 1.0 Strict

De code vind je hier:

index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Coffee Cafe | Espressobar in Hasselt</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/home.css" media="screen" />
    <link rel="stylesheet" href="css/svwp_style.css" type="text/css" media="screen" />
    <!--[if lt IE 10]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->
    <!--[if Opera]><link rel="stylesheet" type="text/css" href="css/opera.css" /><[end if] -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/jquery.slideViewerPro.1.5.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(window).bind("load", function() {
        $("div#beginfoto").slideViewerPro();
    });
    </script>
</head>
<body>
    <div id="container">
        <div id="header_left"></div>
        <div id="header">
            <h1 class="go">Coffee to go</h1>
            <h2 class="stay">Taste to Stay!</h2>
            <h2 id="logo"><a href="index.html">logo</a></h2>
        </div>
        <div id="nav">
            <ul>
                <li><a href="warme-dranken.html">Warme Dranken</a></li>
                <li><a href="koude-dranken.html">Koude Dranken</a></li>
                <li><a href="eten.html">Eten</a></li>
                <li><a href="openingsuren.html">Openingsuren</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <div id="content">
            <div id="welkom_top" class="middle"></div>
            <div id="welkom" class="middle">
                <p class="welkom"><span style="font-family: Lobster Two, Cursive, Arial, Helvetica, sans-serif; color: #b00142">Coffee Cafe</span> is een koffiebar met een knipoog naar grootmoeders tijd. Een plekje in Hasselt waar je zeker moet zijn geweest! ontdek en proef 1 of meer van onze speciale koffiebereidingen, ijskoffies, verse chocolademelk, speciale thee mengelingen, ice tea's of gewoon een heerlijk gebakje van eigen makelij. <br /> Voor de kleine honger bieden wij ook bokes en kroks aan gemaakt met boerenbrood</p>
                <p class="welkom" style="margin-top:15px;">Tot snel!</p>
            </div>
            <div id="welkom_bottom" class="middle"></div>
            <div id="toog_top">
                <h2 class="toog">Vandaag op de toog</h2>
            </div>
            <div id="toog">
                <ul class="toogvandaag">
                    <li>Frangipan koekjes</li>
                    <li>Wortelcake</li>
                    <li>Karamelcake</li>
                    <li>Vanille Muffin</li>
                    <li>Maltoreotaart</li>
                    <li>Boke Ham</li>
                </ul>
            </div>
            <div id="toog_bottom"></div>
            <div id="fotos">
                <div id="tape_top"></div>
                <div id="beginfoto">
                    <ul>
                        <li><img alt="Coffee Cafe" src="img/beginfoto.jpg" /></li>
                        <li><img alt="Coffee Cafe" src="img/beginfoto01.jpg" /></li>
                        <li><img alt="Coffee Cafe" src="img/beginfoto02.jpg" /></li>
                        <li><img alt="Coffee Cafe" src="img/beginfoto03.jpg" /></li>
                    </ul>
                </div>
                <div id="tape_bottom"></div>
            </div>
        </div>
        <div id="footer">
            <div id="footer_content">
                <p>2013 &copy; All rights reserved | Webdesign gemaakt door <a href="http://www.ayi.be">Bert Vanhees</a></p>
                <div id="facebook"><a href="https://www.facebook.com/pages/Coffee-Cafe/140808559314830?fref=ts"><img src="img/facebook.png" alt="facebook" /></a></div>
            </div>
        </div>
    </div>
</body>
</html>

style.css

Code:

@import "reset.css";
@import "typo.css";

body{
    background-image: url("../img/background.png");
    background-color: #3c2919;
}

div#container{
    width: 960px;
    margin: 0 auto;
}
div#header_left{
    background-image: url("../img/bg_header.png");
    background-color: #481704;
    width: 100%;
    height: 121px;
    position: absolute;
    left: 0;
    top:0;
}
div#header{
    background-image: url("../img/bg_header.png");
    background-color: #481704;
    height: 121px;
    width: 960px;
    position: relative;
}
h2#logo{
    background-image: url("../img/coffee_cafe.png");
    text-indent: -9000px;
    width: 183px;
    height: 137px;
    margin: auto;
    margin-top: -50px;
}
h2#logo a{
    display: block;
    width: 183px;
    height: 137px;
}
div#nav{
    width: 960px;
    height: 116px;
    background-image: url("../img/bg_nav.png");
    text-align: center;
}

div#nav ul{
    padding-top: 72px;
}
div#nav ul li{
    display: inline;
    list-style-type: none;
    padding-right: 40px;
}
div.middle:first-child{
    margin-top: 69px;
}
div.middle{
    margin: 0 auto;
}

#footer{
    width: 100%;
    height: 297px;
    position: absolute;
    left: 0;
    background-image: url("../img/bg_footer.png");
    margin-top: 127px;
}

div#footer_content{
    width: 960px;
    margin: 0 auto;
    margin-top: 250px;
}
div#facebook{
    float: right;
    margin-top: -55px;
}

home.css

Code:

div#welkom_top{
    background-image: url("../img/paper_welcome-top.png");
    width: 819px;
    height: 71px;
}

div#welkom{
    background-image: url("../img/paper_welcome-middle.png");
    background-repeat: repeat;
    width: 819px;
    height: auto;
}

div#welkom_bottom{
    background-image: url("../img/paper_welcome-bottom.png");
    width: 819px;
    height: 54px;
}
div#toog_top{
    background-image: url("../img/paper_toog-top.png");
    width: 310px;
    height: 42px;
    margin-top: 121px;
    margin-left: 49px;
}
div#toog{
    background-image: url("../img/paper_toog-middle.png");
    width: 310px;
    height: 200px;
    margin-left: 49px;

}
div#toog_bottom{
    background-image: url("../img/paper_toog-bottom.png");
    width: 310px;
    height: 65px;
    margin-left: 49px;
}
div#fotos{
    float:right;
    margin-top: -320px;
    margin-right: 69px;


}

div#fotos div#tape_top{
    background-image: url("../img/tape_top.png");
    background-repeat: no-repeat;
    width: 73px;
    height: 77px;
    z-index: 1;
    position: absolute;
    margin-top: -30px;
    margin-left: -40px;
}

div#fotos div#tape_bottom{
    background-image: url("../img/tape_bottom.png");
    background-repeat: no-repeat;
    width: 60px;
    height: 64px;
    z-index: 1;
    position: absolute;
    margin-top: -70px;
    margin-left: 400px;
}

**Rob Quist** · 25-03-2013, 12:18

Debug in IE -> kijk wat voor foutmelding je krijgt. Zo te zien een JavaScript foutmelding, want het ziet eruit alsof je hele site beweegt met fades en dergelijke.

**Danny de W.** · 25-03-2013, 16:25

Als alleen IE het probleem is, wellicht de ie.css?

PB anders even een linkje, of meldt hem hier, dan kan er beter gekeken worden.

**Stijn S** · 25-03-2013, 17:02

Wat doet hij als je deze eruit haalt als commentaar?

Code:

<!--[if lt IE 10]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->

Geen weergave in ie7, ie8 en ie9