• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

IE8 zeigt Header nicht an

mutanton

Neues Mitglied
Hey Leute,

Ich habe mit HTML 5 eine Seite geschrieben und eigentlich läuft alles super, nur das der Internet Explorer den Header nicht anzeigt. In Firefox und anderen Browsern (Chrome, Opera, Safari) läuft auch problemlos.
Kann mir einer von euch sagen was da falsch ist?

Die seite sieht so aus:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="BlaBlaBla">
<meta name="author" content="BlaBlaBla">
<meta name="keywords" content="BlaBlaBla">
<title>BlaBlaBla</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" type="image/ico" href="favicon.gif" />
</head>

<header>
    <div>
        <img src="logo.png">
    </div>
</header>

<body>
    <div id="content">
        <ul><li><strong>KONTAKT</strong> <li>STRASSE 1 <li>10000 BERLIN <li>FON 0000.0000 <li><a href="mailto:[email protected]" title="mail an: BlaBlaBla">[email protected]</a></ul>
    </div>
</body>

</html>

und der Stylesheet so:
Code:
@charset "utf-8";
/* CSS Document */

header {width:100%; height:361px; background-color:#98b314;}
body {width:100&; min-width:935px; height:100%; background-color:#ffffff; margin:auto; font:12px Arial, Helvetica, sans-serif;}
img {float:right; margin-right:87px; margin-top:190px; border:none;}
#content {margin-top:145px; text-align:center; white-space:nowrap;}
a:link,a:visited {color:#98b314;text-decoration:none;}
a:hover{color:#6e810f;text-decoration:none;}
ul {list-style-type:none;}
li {display:inline; padding-left:12px;}

vielen dank schonmal!
 
Weil <header> ein HTML5 Element ist, das der IE8 nicht kennt.

Wenn du semantische HTML5 Elemente verwenden und trotzdem IE-kompatibel bleiben willst, solltest du eine Fallback-Option mit JS ( document.createElement() ) implementieren, oder Modernizr einbinden.
 
Zuletzt bearbeitet:
oke, verstehe habs jetzt so gelöst:

HTML:
[...]

 </head>

  <div class="header">
    <div>
      <img src="logo.png">
    </div>
  </div>

  <body>

[...]
Code:
.header {width:100%; height:361px; background-color:#98b314; margin-top:0px;}


[...]
 
Zurück
Oben