DIVs in IE und Firefox unterschiedlich

[_Leviathan_]

IE zeigt Bild nicht korrekt an

Hallo,:)

wollte für eine Webseite an der ich gerade arbeite noch eine vorgelagerte Startseite erstellen.
Auf der soll - zentriert - die Main-Navigation der Webseite und darunter der Banner (Logo etc.) sein.

Siehe: cjh-personalentwicklung.de

Im Firefox passt es. Nicht aber im IE. Weiß da jemand Rat?



Beste Grüße und einen guten Rutsch,
Levi

 

[prm]

[Invalid] Markup Validation of http://www.sebastian-menk.de/ - W3C Markup Validator

 

[_Leviathan_]

Hey,
die zwei fehlerhaften Endtags im Meta-Teil sind weg.
"Valign=Center" ist nun auch raus (offline) - verändert ja aber sowieso nichts an der Seite.
Zum Rest: Die Dokumententyp-Deklaration ist ja im Grunde ok, für die Schreibweise der Tags, so wie ich sie habe. Da eine Änderung nicht mein Problem löst, belasse ich es dabei.

Danke soweit.
Hat trotzdem jemand noch eine Erklärung für die komische IE-Ausgabe der Seite?

 

[prm]

Es wäre sinnvoll, wenn du deine Seite zunächst valide machst.

Erst wenn diese Fehlerquellen ausgeschlossen sind, kann man andere Fehler lokalisieren.
Das ist kein böser Wille, sondern einfach logische Vorgehensweise. Es geht darum, dass die Browser verstehen, welche Code-Sprache du verwendest.

 

[_Leviathan_]

Hallo prm,

ich gebe dir da absolut Recht. Die fehlenden "/" und das Löschen des "valign..." nahm ich auch gleich vor.

Bleiben noch die Schreibweisen bei den Endtags.
Diese sind bei der separaten Startseite genau wie auf der gesamten Webseite, welche bereits weitestgehend fertig ist und Online im FF genau wie im IE etc. keinerlei Probleme bereitet. Deshalb meinte ich, dass hier nicht der Fehler sein kann.

Jedoch: (Ich arbeite die ganze Zeit ja dran.) Werde es mal nachher ausprobieren.

Danke soweit.

Frohes Neues,:)

MARKUP VALIDATION PASSED
(Hab nun die paar Fehler ausgemerzt und die Seite hochgeladen.)

Problem bleibt: Im IE wird die Webseite nicht richtig angezeigt.:(

 

[prm]

Versuch's mal so:

#container {
width: 750px;
height: 100%;
margin: 0 auto;
padding: 0;
text-align: left;
}

            /* TOP NAV */
#navMain {
background-image: url(http://www.sebastian-menk.de/images/banner2.jpg);
        background-position: center center;
        background-repeat: no-repeat;
height: 250px;
margin: 200px 0;
padding: 5px 0 0 10px;
}

<div id="container">
<div id="navMain"
<ul>
      <li><a href="angebot_termine.html">Angebot</a></li>
      <li><a href="profil_ueber_mich.html">Profil</a></li>
      <li><a href="archiv.html">Archiv</a></li>
      <li><a href="kontakt.php">Kontakt</a></li>
    </ul>
</div>
</div>

 

[_Leviathan_]

Es passt. (So gut wie.):)

Habe nun auch noch den "container" herausnehmen können, sowie ein paar Kleinigkeiten aus dem Code gelöscht, die irgendwie keinerlei Funktion haben. Nun ist es etwas schlanker. (Werde mir trotzdem die Anweisungen "position" etc. nachher noch mal anschauen - weil lernen.)

ABER: Die Navi wird nie mittig angezeigt. Bzw. hätte ich sie eh lieber linksbündig. Mit "text-align: left" tut sich jedoch nichts?

Beste Grüße,
Levi

 

[prm]

So sollte es klappen:

#navMain {
background-image: url(images/banner2.jpg);
background-position: center center;
background-repeat: no-repeat;
height: 250px;
width: 750px;
margin: 200px auto;
}

ul {margin: 0; padding: 0;}

#navMain li {
padding: 0;
float: left;
list-style-type: none;
}

 

[_Leviathan_]

So ähnlich versuchte ich es jetzt zwischenzeitlich auch schon...
Dann aber wird im FF sowohl Navi als auch der Banner nach links verschoben. Also die "margin"-Anweisung im "navMain" übergangen/ aufgehoben?

 

[prm]

Bei #navMain musst du noch links und rechts einen auto-Abstand nehmen:

margin: 200px auto;

 

[_Leviathan_]

Ach mensch, das "auto" steht ja auch schon weiter oben. Sorry, da hab ich vor lauter Herumprobieren nicht mal richtig den Code übernommen. Nun passt es.
Vielen, vielen Dank, für die Hilfe - den Erkenntnisgewinn!