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/6b6a...d5e15f5730.jpg

Hier die gleiche Seite im Inernet Explorer:
http://www.picspeicher.de/files/4a57...f8f01dad42.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?

Hi,

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

LG

Hi.

Zitat von sp_ChefKoch

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.

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)

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.

bitteschön

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


btw: das geht flott hier, super

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:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

body {   margin: 0px 0px 0px 0px;   padding: 0px 0px 0px 0px;   [B]text-align: center;[/B]   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;         [B]text-align: left;[/B] /* damit der Inhalt linksbündig ausgerichtet wird */ }

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

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.

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:

hier is der link:

spchefkoch1.sp.ohost.de

Notier mal im Stylesheet nach dem ul.BoxHeadline-Selektor folgenden Star-HTML-Hack für den IE, damit er die "Headline"-Texte ordnungsgemäß anzeigt:

Code :

1 2 3 4 5 6 7 8 9 10 11

ul.BoxHeadline {         margin: 0px 0px 0px 0px;         padding: 4px 4px 4px 8px;         font-weight: bold;         list-style: none;         background-image: url(images/box_headline.gif);         color: #FFFFFF;         border-left: 2px solid #000000;         border-right: 2px solid #000000; } [B]* html ul.BoxHeadline { height:1%; }[/B]

Das Sprengen der rechten Login-Box unterbindest du, indem die width=100%-Deklaration für die Tabelle auf "90%" herabgesenkt wird.

Zitat von Maik

Das Sprengen der rechten Login-Box unterbindest du, indem die width=100%-Deklaration für die Tabelle auf "90%" herabgesenkt wird.

Aber die rechten Boxen sind doch mit width:176px deklariert?

Oder versteh ich das jetzt falsch?

Schalt doch einfach mal mit border="1" den Tabellenrahmen ein, um zu sehen, bis wohin der IE die Tabelle ausdent

Es war ja schon ne Border drinnen.

Was ich nicht kapiert habe is, dass er das Login-Feld im IE anscheinend größer gemacht hat als im Firefox und dadurch sind die kompletten rechten Boxen gewandert.

Naja ich hab jetz mal fürs login-feld die angesprochene width:90% deklaration reingemacht und siehe da es passt.
Ich hab allerdings keinen Plan wieso.

so, nachdem mir für den Internet Explorer so wunderbar geholfen wurde schieb ich doch gleich mal einen Screenshot für Opera hinterher

http://www.picspeicher.de/files/221a...d0f507a08d.jpg

Hier ist, wie ihr sehen könnt, das Problem, dass das Help- und Close-"Symbol" in die nächste Zeile gerückt wird und dadurch die Headlines verzerrt werden.

Die Code-Dateien hab ich auch mal aktualisiert:
spchefkoch.sp.ohost.de/og