Der Internet Explorer verwurstet mein schönes Layout

[Lars]

Ich habe meine karge Freizeit heute ausnahmsweise mal nicht zum Schweine schlachten verwendet und statt dessen eines dieser hochmodernen tabellenlosen Layous zusammen gezimmert. Selbiges sieht in Safari auch prächtig aus, nur der olle Internet Explorer haut da einen mir unverständliche Leeraum an einer Stelle rein.

Und jetzt kommt der Hammer: Ich habe keine Ahnung, woran das liegt. Wenn also jemand die Freundlichkeit besäße, mal kurz einen fachmännischen Blick drauf zu werfen ...

Was zum Klicken gibt's natürlich auch:

Die besage Seite in Aktion

Zugehöriges Stylesheet #1
Zugehöriges Stylesheet #2

Screenshot Safari
Screenshot Internet Explorer

[Lars]

Ich habe grad' gesehen, dass der Fussteil auf dem PC (Internet Explorer) auch noch macht, was er will -- wenn da also auch mal jemand was zu sagen könnte ...

[webmichl]

Der Kopfteil sieht in meinem IE5.5 OK aus - aber hast Du schon gesehen, was der Mozilla aus deiner Seite macht?

[Lars]

Aber immerhin macht er nicht den Murks mit dem Abstand wie der IE. Ich finde es aber schon sehr merkwürdig, dass der Microsoft-Browser in der Versiob 5.5 anscheinend keine Probleme mit der Darstellung hat. Jetzt bin ich wirklich etwas verwirrt ...

[webmichl]

...ich seh gerade: so 100%ig korrekt isses nu auch wieder nicht:
hier hat's links und rechts Ränder, die nicht sein sollten...

[Lars]

Ich habe nun noch Angaben zu overflow-y bzw. -y speziell für den IE eingebaut und siehe da: das Abstandsproblem ist unter Windows gelöst. Dafür fehlt dem Fussteil jetzt der Hintergrund ...

Ebenso tut sich das Abstands-Drama nun im IE 5 unter Mac OS Classic auf (ob es vorher auch schon da war, kann ich nicht sagen, ich hatte noch nicht unter OS 9 getestet). Zudem stimmt in letztgenanntem Browser irgendwas mit der Navi und dem darunterliegenden Hintergrundblid nicht, die Navi scheint einen Pixel nach rechts verschoben (s. Screenshot). Vom Mozi ganz zu schweigen.

Ich werde noch wahnsinnig ...

EDIT

Das Pixel-Problem mit der Navi tritt auch mit dem IE unter X auf (sieht man auch auf meinem Screenshot vom ersten Beitrag).

[LANtastic]

Guguck Lars,

ich habe nun noch eine weiter schlechte Nachricht für dich.
Sieh dir mal an, was der IE5/win hier im Büro aus der Seite macht ?
Soviel also schonmal dazu

Aber zum IE5/mac Problem :

Spontan vermutet:
Du verwendest ein Transitional-Doctype.
verwende doch mal entweder HTML 4.01 Strict, oder XHTML 1.0 Strict.

Möglicherweise hilft dir das dann weiter.
ist nur eine Idee.

Ausserdem gibt es noch ein weiters Ding, was ich als "wacklig" bezeichnen würde:

<div style="float:left;clear:both;">
  <div class="navi">&rsaquo; Startseite</div>
  ..
  ..

Die linke Spalte via float auszurichten, ist kaum nötig, da alle Browser die Angabe left fehlerfrei interpretieren.
Wenn dann würde ich nur eine rechte Spalte floaten, da es hier wesentlich mehr Problem gibt.
Der IE5/mac hat z.B. einen Bug, wenn du position/absolute mit right:0px verwendest. er zeigt dann sofort eine Scrollleiste an, auch wenn diese nicht nötig ist. float wäre da ggf. angebracht.

versuche doch mal bitte die Linke spalte absolut zu positionieren und nicht zu floaten.

Darüberhinaus solltest du das "float:left;clear:both" etwas anders unterbringen.
beides in eine Zeile zu packen kann auch wieder unerwünschte Nebeneffekte mit sich bringen.
Stattdessen sollest du für "clear:both" eine eigenen Layer am Ende der links Spalte einsetzen, wenn du schon unbedingt float:left verwendest.

Sprich alles wie gehabt, aber das "clear:both" rausnehmen.
Dafür dann am Ende der Navi, hinter den letzten Tag ein

<div style="clear:right"><!-- leerer Kommentar --></div>

versprechen kann ich nichts, aber es könnte helfen.

[Lars]

Ich habe den Doctype jetzt in XHTML/Strict geändert und das angesprochene <div> von der clear-Angabe befreit. vielen Dank für den Tipp schon mal.

Unter Windows sieht es jetzt mit dem IE6 alles bestens aus, die Mac-Version des Browsers stellt die rechte Spalte (mit dem Inhalt) jedoch nach wie vor rechts unterhalb der Navi dar.

[LANtastic]

Da ich leider keinen Mac habe. Könntest du bitte nochmal einen Screenshot posten, damit man mal sieht, wie die Seite nun im IE/mac aussieht ?

[Lars]

Aber natürlich ...

[LANtastic]

Das ist jetzt auch "vollkommen" normal.
um zu verstehen was ich meine, mach mal dieses :

du hast ja irgendwo diese Zeile drin :

<div style="clear:right"><!-- ... --></div>

ergänze mal den Inhalt des style Attributes mit :

border:2px solid red;

verstehst du ungefähr was da passiert ?
Spiel mal ein wenig mit dem clear rum.

[Lars]

Ja, das ist ja auch logisch. Aber das erklärt irgendwie nicht, warum der Inhalts-Teil unterhalb der Navigation hängt.

Sollte das "leere" <div> samt der clear-Angabe nicht eher dafür sorgen, dass das Nachfolgende darunter dargestellt wird?

[LANtastic]

Sollte das "leere" <div> samt der clear-Angabe nicht eher dafür sorgen, dass das Nachfolgende darunter dargestellt wird?

Nein, denn dann müsste da ein clear:both hin. Durch das clear:right, gibst du saloppg gesagt, den Bereich rechts vom gefloateten wieder frei. Erst wenn da clear:both zwingst du den Browser den Bereich so zu brechen, daß der Inhalt unterhalb diese clear's angezeigt wird.

Was passiert denn, wenn der Inhalt der rechten Spalte, also bei dir der Inhaltsblock einfach zu breit ist ?

Dann braucht er mehr Platz.
Wenn dann aber der Platz einfach nicht da ist ? Was dann ?

Dann muß er den Inhalt nach unten schieben, weil da wieder 785px frei sind und nicht wie unmittelbar darüber nur 600px (- 10px padding), da die Navigation ja den Rest weg nimmt.

Sprich : Ändere die beiden Klassen .boxheader und .boxfooter etwas ab. Gib ihnen die Breite 588px.
Der Klasse .newbox klaust du ebenfalls noch 2px, also 578px. Dann sollte meiner Meinung nach der Inhalt wieder korrekt dargestellt werden und nach oben neben die Navigation rutschen.

Wie gesagt, dass sagt mir meine Therorie, aber ich kann es ohne Mac leider nicht garantieren.
Sollte es nicht klappen, dann spiele mal mit den Breiten dieser 3 Klassen rum. Darin liegt auf jeden Fall der Hund begraben.

[Lars]

So, ich konnte das Problem inzwischen lösen. Durch gezielt eingesetzte negative "margin"-Angaben für den Inhaltsteil sowie eine Überarbeitung der "float/clear"-Werte schnallt es nun auch der Internet Explorer Mac. Vielen Dank noch mal an LANtastic, er hat mir nämlich den richtigen Weg aus dem Chaos gewiesen.

Als nächstes würde ich mich gerne des Mozi-Problemes annehmen. Könnte mir daher ein PC-User einen entsprechenden Screenshot anhängen?

[webmichl]

hier mal die Linux-Variante...