✔ Kompatibilität IE und Firefox

[sp_ChefKoch]

Hallo allerseits,

ich habe eine Seite, welche mit CSS erstellt wurde etwas abgeändert und nun habe ich das Problem, dass sie zwar im Firefox richtig, aber im Internet Explorer falsch angezeigt wird.

Hier ein Bild aus dem Firefox:
http://www.picspeicher.de/files/6b6aa5090c970517c8ce95d5e15f5730.jpg

Hier die gleiche Seite im Inernet Explorer:
http://www.picspeicher.de/files/4a57fedc8e9e273c839ef0f8f01dad42.jpg


Wie ihr sehen könnt wird im IE die seite nicht zentriert dargestellt,
die Headlines der rechten Boxen sind etwas zu lang,
in den Headlines der Boxen (rechts wie links) sieht man den Text nicht (er ist allerdings vorhanden, da man ihn herauskopieren kann)
und die Positionierung der linken Boxen ist ebenfalls falsch.

Könnt ihr mir helfen, diese Fehler zu korrigieren?

 

[kuddeldaddeldu]

Hi,

ohne den CSS-Code zu kennen und zu wissen, was Du da geändert hast, wird's schwer...

LG

 

[Maik]

Hi.

Könnt ihr mir helfen, diese Fehler zu korrigieren?

Sicher, wenn du den dazugehörigen HTML- und CSS-Code postest, denn anhand der Screenshots lässt sich nur mit Sicherheit sagen, dass das HTML-Dokument zumindest dem IE im "Quirksmode" übergeben wird, denn in diesem Darstellungsmodus hält er sich nicht mehr an das CSS-Boxmodell. und weiß daher u.a. mit der margin:0 auto-Deklaration nichts mehr anzufangen, die hier wohl zum horizontalen Zentrieren des Layouts dient.

Alles weitere lässt sich erst durch eine Begutachtung des Quellcodes feststellen und klären.

 

[sp_ChefKoch]

ok dann mal hier die Quellcodes der style.css und der index.php:

http://spchefkoch.sp.ohost.de/og/

Ich hab sie mal in txt-dateien reingepackt, damit der Beitrag nicht so weit aufgeplustert wird.

Was ich von mir aus geändert habe:
- Zentrierung des headers
- positionierung der boxen am header
- farbgestaltung (welche allerdings alle korrekt angezeigt werden)
- diverse hintergrundbilder (headlines der Boxen)

 

[Maik]

Könntest du bitte den PHP-geparsten, sprich den vom Browser ausgegebenen HTML-Code zeigen, denn mit dem PHP-Template lässt sich nicht viel anfangen.

Und wie ich richtig vermutet habe, wird der IE6 durch den XML-Prolog vor der Doctype-Deklaration in den Quirksmode geschaltet - siehe hierzu den Abschnitt "Quirks Mode" im Artikel Der »DOCTYPE-Switch« und seine Auswirkungen.

 

[sp_ChefKoch]

bitteschön

http://spchefkoch.sp.ohost.de/og/index_html.txt


btw: das geht flott hier, super

 

[Maik]

Den IE lassen wir wohl mal besser im Quirksmodus, denn im standardkonformen Modus zerschiesst er das Layout noch mehr.

Nimm mal für's erste folgende Änderung im Stylesheet vor, damit er das Layout im Fenster horizontal zentriert:

body {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  text-align: center;
  background: #404040;    
  color: #ffffff;
  font-size: 11px;
  font-weight: normal;
  font-family: verdana, helvetica, sans-serif;
}

div#Logo {
        position:relative;
        margin: 0 auto;
        width: 1010px;
        z-index: 10;
        text-align: left; /* damit der Inhalt linksbündig ausgerichtet wird */
}

Ansonsten kann ich jetzt in der Seite keine Darstellungsunterschiede in den beiden Browsern entdecken.

 

[sp_ChefKoch]

Wunderbar. Das Problem mit der Zentrierung ist damit schonmal erledigt. Klasse.


die Texte der Headlines sieht man aber leider immernoch nicht, genauso wie es die rechten Boxen (vor allem beim Login) zerhaut.

 

[Maik]

Ist die Seite online erreichbar, um dort mal einen Blick drauf werfen zu können?

Denn bei mir zeigt der IE die "Headlines" (Menu, Meine Daten, Statistiken, usw.) an und die rechte Box mit dem Login-Bereich wird in ihm auch nicht zerhauen:

 

[sp_ChefKoch]

hier is der link: