Malte Kiefer: CSS Layout wird im IE nicht richtig angezeigt.

Beitrag lesen

Hi,

also ich habe es nochmal überarbeitet:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Zweispaltiges Layout mit fester Breite</title>  
<style type="text/css">  
<!--  
  body {  
    color: black; background-color: white;  
    font-size: 100.01%;  
    font-family: Helvetica,Arial,sans-serif;  
    margin: 0; padding: 1em 0;  
    text-align: center;  /* Zentrierung im Internet Explorer */  
  }  
  
  div#Seite {  
    text-align: left;    /* Seiteninhalt wieder links ausrichten */  
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */  
    width: 85%;  
    height:500px;  
    padding: 0.5em;  
    border: 2px ridge silver;  
  }  
  html>body div#Seite {  
    border-color: gray;  /* Farbangleichung an den Internet Explorer  */  
  }  
  
ul {  
 list-style: none;  
  
 border-bottom: 1px solid #ccc;  
 font-size: 0.91em;  
 float: left;  
 width: 10em;  
 margin: 0; padding: 0;  
 border-right: 1px groove black;  
 }  
  
ul li a {  
 display: block;  
 text-decoration: none;  
 color: #777;  
 padding: 5px;  
 border: 1px solid #ccc;  
 border-bottom: 0;  
}  
  
  
div#Inhalt {  
    margin-left: 12em;  
    padding: 0 1em;  
    height:500px;  
    border-left: 1px groove silver;  
}  
div#Inhalt h1 {  
    font-size: 1.5em;  
    margin: 0 0 1em;  
}  
div#Inhalt h2 {  
    font-size: 1.2em;  
    margin: 0 0 1em;  
}  
div#Inhalt p {  
    font-size:1em;  
    margin: 1em 0;  
}  
    -->  
</style>  
</head>  
<body>  
  
<div id="Seite">  
<ul id="nav">  
  <li><a href="#">Home</a></li>  
  <li><a href="#">About</a></li>  
  <li><a href="#">Services</a></li>  
  <li><a href="#">Contact Us</a></li>  
</ul>  
  
  <div id="Inhalt">  
    <h1>CSS-basierte Layouts</h1>  
    <h2>Seite mit fester Breite</h2>  
    <p>Diese Seite ist hat eine feste Breite von 760px und ist zentriert.</p>  
    <p>Die Breite ist so gew&auml;hlt, dass in 800px breiten Fenstern nicht horizontal  
       gescrollt werden muss und auch ein Ausdruck keine Probleme bereiten sollte.</p>  
  </div>  
</div>  
  
</body>  
</html>