Tim: Falsche Darstellung im IE

Hallo zusammen, ich bin dabei eine mit CSS kleine Homepage zu machen.
Eigentlich sollte sie so aussehen wie im Firefox: http://timconzelmann.de/hp1.jpg der Internet Explorer lässt die blaue Zeile allerdings anderes darstellen: http://timconzelmann.de/hp2.jpg

Gibt es eine Möglichkeit dieses Problem zu umgehen?

Habe es wie folgt geschrieben:
css-datei:
 body {
  margin: 1;
  padding: 0;
  background-image: url(bilder/bg.jpg);
 }

#container {
  width: 670px;
  margin: auto
 }

#top1 {
  width: 148px;
  height: 144px;
  text-align: justify;
  background-color: #FFFFFF;
  float:left;
 }

#top2 {
  margin:auto;
  width: 522px;
  height: 144px;
  text-align: justify;
  background-color: #FFFFFF;
  float:left;
 }

#navi {
  vertical-align:middle;
  margin:auto;
  width: 670px;
  height: 168px;
  text-align: center;
  background-color: #557FAA;
 }

#inhalt {
  margin:auto;
  width: 670px;
  height: 400px;
  text-align: justify;
  background-color: #FFFFFF;
 }

und so in html eingebunden:
<div id="container">
<div id="top1"><p class="aussenabstand"><img src="bilder/mgv_logo.gif" alt="" border="0"></p></div>
<div id="top2"><h1>Männergesangverein 1862 Binsdorf e.V.</h1><br><h2>72351 Geislingen-Binsdorf<br>
Kontakt: <a href="mailto:thomas.kalbacher@mgv-binsdorf.de">thomas.kalbacher@mgv-binsdorf.de</a></h2></div>
</div>
<div id="navi">ermine - Impressum - Gästebuch</div>
<div id="inhalt"></div>

Wäre um jeden Tipp dankbar, und wenn ihr bessere Möglichkeiten habt die Seite mit CSS aufzubauen immer her damit, bin noch in der Lernphase ;-)

  1. Hi,

    Eigentlich sollte sie so aussehen wie im Firefox: http://timconzelmann.de/hp1.jpg der Internet Explorer lässt die blaue Zeile allerdings anderes darstellen: http://timconzelmann.de/hp2.jpg

    eigentlich zeigt der IE die "Zeile" so wie angegeben (height: 168px;) an.

    margin: 1;

    1 was?

    #navi {
      vertical-align:middle;

    Diese Eigenschaft muss ignoriert werden, da #navi ein Block-Element ist.

    <br><h2>72351 Geislingen-Binsdorf<br>

    Die BRs sind überflüssig.

    freundliche Grüße
    Ingo

    1. hallo. dann zeigt sie sie also der firefox falsch an?

      1. wenn ich height unter 168px mache dann zeigt er das feld in firefox überhaupt nichtmehr an :/

        1. Hi,

          wenn ich height unter 168px mache dann zeigt er das feld in firefox überhaupt nichtmehr an :/

          Dann hast Du vermutlich an anderer Stelle einen Fehler gemacht.

          freundliche Grüße
          Ingo

  2. Hmm...

    Die Seite gibt es doch schon und sie scheint unter allen Browsern anständig zu laufen:
    http://web466.xps14.microserver.de/

    Wo ist das Problem?

    1. Die Seite wird ihm Rahmen unseres Projektthemas in der Schule gemacht, nun will ich die vorhandene in CSS mit Boxen usw. umschreiben.

      Hmm...

      Die Seite gibt es doch schon und sie scheint unter allen Browsern anständig zu laufen:
      http://web466.xps14.microserver.de/

      Wo ist das Problem?

      1. Die Seite wird ihm Rahmen unseres Projektthemas in der Schule gemacht, nun will ich die vorhandene in CSS mit Boxen usw. umschreiben.

        Achso.

        Das problem, das wir hier haben, ist:
        Wir haben deine Version der Seite nicht, sodass wir den Quelltext manuell abkopieren müssen, was umständlich ist und wobei wir zusätzliche Grafiken und ähnliches auch nicht haben.

        Dein Problem solltest du wie gesagt lösen können, in dem du das "height" entfernst.

        Noch ein paar allgemeine Anmerkungen:
        -Verzichte soweit wie möglich auf überflüssige <div>s oder ersetze die durch sinnvolle Elemente.

        Aus
        <div id="top1"><p class="aussenabstand"><img src="bilder/mgv_logo.gif" alt="" border="0"></p></div>
        kannst du z.B.
        <p class="top"><img src="bilder/mgv_logo.gif" alt="" border="0"></p>
        oder sogar
        <img src="bilder/mgv_logo.gif" alt="" id="topimage">
        machen, was überflüssigen Code verhindert. border="0" lässt sich auch im CSS umsetzen.

        -Entferne überflüssige <br>s oder ersetze die je nach Fall durch <p>-tags

        -Die Navi ist zur Zeit noch nicht anklickbar, könnte aber später mit einer Liste(<ul>) realisiert werden.