Elle: CSS-Layout im Internet-Explorer falsch dargestellt

Hallo
der Internet-Explorer stellt die Seite www.uni-weimar.de/erweiterte-kirchennutzung falsch dar. Ich bin mir aber nicht sicher, wo der fehler liegt... Sind es die Probleme mit dem Box-Modell oder liegt der Teufel bei den float-Angaben? Ich würde mich über einen kurzen Hinweis wirklich sehr freuen.

  1. Hallo,

    ein Body-Tag wäre nicht schlecht ;-)

    ciao Akela

    1. !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Erweiterte Kirchennutzung</title>
      <link href="style.css" rel="stylesheet" type="text/css">
      </head>
      <div id="container">
      <div id="oben">
      <img src="img/bild1.jpg" width="427px">
      <ul id="menu">
      <li><a href='index.html'>STARTSEITE</a></li>
      <li><a href='programm.html'>PROGRAMM</a></li>
      <li><a href='arbeitsgruppen.html'>ARBEITSGRUPPEN</a></li>
      <li><a href='exkursion.html'>EXKURSION</a></li>
      <li><a href='organisatorisches.html'>ORG. HINWEISE</a></li>
      <li><a href='anmeldung.html'>ANMELDUNG</a></li>

      </ul>

      </div>
      <div id="titel">
      <img src="img/titel.png">
      </div>
      <div id="inhalt">
      </div>
      </div>
      <body>
      </body>
      </html>

      und die CSS-Datei (hoffentlich nicht zu lang)

      @charset "UTF-8";
      /* CSS Document */

      body {
      text-align:center;
      background:#6699cc;
      margin-top:0px;
      font-family:Arial, Helvetica, sans-serif;
      font-size:100%;
      text-align:left;

      }

      #container {
        margin: 0 auto;
        width: 600px;
        }

      #oben{
       background:#fff;
       height: 380px;
       padding-top: 5px;
      }

      #titel{
       background:#006699;
       height: 25px;
       padding-top:4px;
      }

      #inhalt{
       background:#fff;
       margin-top: 20px;
       min-height:300px;
       padding:10px;

      }

      img{
      float: left;
      margin-top: 5px;
      margin-left: 10px;
      }

      img#oben {
      width: 147px;
      height: 185px;
      margin:0px;
      }

      p{
      font-family: Arial, Helvetica, sans-serif;
      font-size:80%;
      text-align:left;
      color: #000000;
      }
      p.trenner{
      padding-bottom:7px;
      margin-top: 10px;
      border-bottom: solid 1px #006699;
      margin-bottom: 10px;
      font-size:80%;}

      p.klein{
      font-size:60%}

      h1 {
      font-size: 100%;
      color: #006699;
      padding-bottom:20px;
      padding-top: 10px;
      font-family:Arial, Helvetica, sans-serif;
      }

      h2 {
      font-size: 90%;
      font-family:Arial, Helvetica, sans-serif;
      text-align:left;
      }

      h3 {
      font-size:85%;
      padding-top: 8px;
      font-family:Arial, Helvetica, sans-serif;
      }

      p.inhalt {
      text-align:justify;
      padding-bottom:0px;
      font-size:80%;
      }

      #menu {
       background: #fff;
       float: right;
       list-style: none;
       padding-bottom: 3px;

      padding-left: 5px;
       width:147px;
       margin-top: 5px;
       margin-bottom: 0px;

      }
      #menu li {
       font: 70%  LTSyntax Regular, Arial, Helvetica, sans-serif;
       margin-bottom: 5px;

      padding: 0;
       text-align:left;
      }
      #menu a {
       background: #c0c0c0;
       color: #666;
       display: block;
       margin: 0;
       padding:5px 12px;
       text-decoration: none;
      }
      #menu a:hover {
       background: #006699;
       color: #fff;
       padding-bottom: 5px;
      }

      #menu a:active {
       background:#006699;
       color: #fff;
       }

      1. Das Einfügen des Body-Tags hat den Fehler leider nicht behoben...absolut positionieren hilft auch nicht. Hilfe?!

        1. Hallo Elle,

          Du solltest an der Breite des #menu rumschrauben. Setzt den doch mal auf 100px und mach die menuetexte testweise kürzer. Es sieht so aus, als ob der Platz für das Menue nicht reicht und in den Bereich hinter dem ersten DIV umgebrochen wird.
          Ich hatte auch schon Fehler, wenn ich den DIV nicht direkt hinter dem Bereich geschlossen habe. Schreib Dein Menu zum testen mal ohne Leerzeichen in eine Zeile. Das hat mich im ie schon Nerven gekostet.

          ciao Akela

  2. Nochmal eine Anmerkung: würde eine absolute Positionierung des Menüs das Problem lösen?

    1. Nochmal eine Anmerkung: würde eine absolute Positionierung des Menüs das Problem lösen?

      Hallo,

      hast Du mein Posting gelesen ?

      Du hast den Body-tag falsch gesetzt, dieser steht ganz am Ende. Somit ist der gesamte Aufbau des Dokuments reine Glücksache.

      ciao Akela

      1. Ach Mensch, vielen DANK.... Siehts jetzt besser aus? Ich hab IE grad nicht griffbereit....

  3. Hi,

    der Internet-Explorer stellt die Seite www.uni-weimar.de/erweiterte-kirchennutzung falsch dar. Ich bin mir aber nicht sicher, wo der fehler liegt... Sind es die Probleme mit dem Box-Modell oder liegt der Teufel bei den float-Angaben?

    Das Menue passt nicht neben das Bild, wird deshalb unterhalb von diesem dargestellt. Und dann groesstenteils vom Div mit der ID "inhalt" ueberlagert.

    Box-Model-Probleme koennten die Ursache sein - da du den IE mit der unvollstaendigen Doctype-Angabe in den Quirks Mode schickst, "muss" er ja auch in der aktuellen Version noch so falsch rechnen, wie seine 5er-Vorgaenger.

    MfG ChrisB