IE vergeigt Layout?

[VipViper2000]

Hi Leute!

Ich hab ein Problem und kann mir nicht erklären, woran es liegt: Ich habe eine Seite gemacht die auf CSS basiert. Im Firefox sieht auch alles super aus, aber wenn ich die gleiche Seite im IE 6.0 öffne, bekommt er das mit dem Layout nicht hin. Vielleicht schaut ihr euch einfach mal an, was ich meine:

http://www.ferienwohnung-engadin.de

Beim IE rutscht der Content Bereich in die nächste Zeile. Ich weiss auch warum: Anscheinend reicht ihm der Platz nicht aus, weil wenn ich in der CSS Datei den Breite der Seite erhöhe gehts auch im IE ( aber dann passen andere Sachen wieder nicht ). Ich dachte eigentlich der Box-Modell-Bug tritt nur im Quirks-Modus auf und eigentlich hab ich doch eine richtige Doctype Deklaration. Zumindest der w3c Validator bestätigt mir eine valide HTML 4.01 Strict Seite..

Vielleicht könnte ihr mir mal helfen. Weil sonst müsste ich nur deshalb wirklich dann mit Browserweiche arbeiten, was aber bisher eigentlich noch nicht nötig war.

Gruß,
VipViper2000

[Rainer Topf]

hi,

Beim IE rutscht der Content Bereich in die nächste Zeile. Ich weiss auch warum:

kein wunder zwei <div> nebeneinander :)

mach ne tabelle und gib das menü in die linke und den contend in die rechte spalte, müsste klappen

gruß

[Joachim]

Hi,

mach ne tabelle und gib das menü in die linke und den contend in die rechte spalte, müsste klappen

wozu sollte er das tun?

Gruesse, Joachim

[Cheatah]

Hi,

mach ne tabelle und gib das menü in die linke und den contend in die rechte spalte, müsste klappen

beziehe bitte das berühmte Zitat von Herrn Nuhr auf Dich.

Cheatah

[VipViper2000]

hi,

Beim IE rutscht der Content Bereich in die nächste Zeile. Ich weiss auch warum:

kein wunder zwei <div> nebeneinander :)

mach ne tabelle und gib das menü in die linke und den contend in die rechte spalte, müsste klappen

gruß

Also das halte ich für eine sehr schlechte Idee ;). Der Sinn von CSS ist es gerade sowas NICHT mit Tabellen zu machen.

[Cheatah]

Hi,

Beim IE rutscht der Content Bereich in die nächste Zeile. Ich weiss auch warum: Anscheinend reicht ihm der Platz nicht aus, weil wenn ich in der CSS Datei den Breite der Seite erhöhe gehts auch im IE ( aber dann passen andere Sachen wieder nicht ).

ja, Du kannst aber auch das margin-left verringern.

Ich dachte eigentlich der Box-Modell-Bug tritt nur im Quirks-Modus auf

Der IE hat genügend andere Bugs, die nicht mit in der Schachtel stecken.

Vielleicht könnte ihr mir mal helfen. Weil sonst müsste ich nur deshalb wirklich dann mit Browserweiche arbeiten,

Nein, das ist unnötig. Ein simpler CSS-Hack reicht.

Cheatah

[OhneName]

Hi VipViper2000,

Analysieren wir erstmal wieviel Platz wir zur Verfügung haben und wie du diesen verbrauchst:

Width Site:            850px
Width Navigation:     -150px
Width Content:        -658px
Padding-left Content:  -15px
Padding-right Content: -15px
____________________________
                        12px

Jetzt hast du für Content noch ein Margin-left: 160px definiert, das sind 10px mehr als Width Navigation.
Also müssen wir von den 12px noch einmal 10px abziehen.
Damit bleiben 2px für Border-width von Content. Da der Border auf beiden Seiten dazukommt, bleibt eine verfügbare Border-Width von 1px.
Angegeben hast du aber "thin" und das interpretiert der IE scheinbar als 2px und nicht als 1px.
Damit wird die eigentliche Seite breiter als 850px und Content rutscht unter Navigation.

Lösung:
A: Ersetze Border-width: thin durch 1px.
B: Mache eine andere der obigen Angaben mindestens 2px kleiner.
C: verzichte auf ein starres Layout mit px-Angaben und lass dem Inhalt so viel Platz wie er braucht.

Ich hoff zumindest, dass das das Problem war :-)

Gruss,
OhneName

[Ingo Turski]

Hi,

Lösung:
A: Ersetze Border-width: thin durch 1px.
B: Mache eine andere der obigen Angaben mindestens 2px kleiner.
C: verzichte auf ein starres Layout mit px-Angaben und lass dem Inhalt so viel Platz wie er braucht.

Lösung D - die simpelste: Verzicht auf eine Breitenangabe für content; die ist nämlich absolut überflüssig, es sei denn, man will solche Fehldarstellungen bewußt provozieren.

freundliche Grüße
Ingo

[VipViper2000]

Hi,

Lösung:
A: Ersetze Border-width: thin durch 1px.
B: Mache eine andere der obigen Angaben mindestens 2px kleiner.
C: verzichte auf ein starres Layout mit px-Angaben und lass dem Inhalt so viel Platz wie er braucht.

Lösung D - die simpelste: Verzicht auf eine Breitenangabe für content; die ist nämlich absolut überflüssig, es sei denn, man will solche Fehldarstellungen bewußt provozieren.

freundliche Grüße
Ingo

Also ihr beide habt mir sehr weiter geholfen: die Sache mit border-width wird mir jetzt irgendwie auch klar ( thin wird vom IE anders interpretiert, weshalb die Rahmen immer unschön dicker aussahen ). Das hat aber beim Layout nicht geholfen.

Aber das entfernen der Breite für Content hat den gewünschten Effekt gebracht und ich weiss wirklich nicht, warum ich da eine Breite für angegeben hatte - anscheinend völlig Sinnfrei.

Aber seht es euch jetzt nochmal an: wunderbar!

Danke Euch!!!!

[Ingo Turski]

Hi,

Aber das entfernen der Breite für Content hat den gewünschten Effekt gebracht und ich weiss wirklich nicht, warum ich da eine Breite für angegeben hatte - anscheinend völlig Sinnfrei.

Die Fausregel bei HTML und CSS ist wie bei vielen Dingen: soviel wie nötig, aber sowenig wie möglich. Das fördert die Übersichtlichkeit und verringert die möglichen Fehlerquellen.
Mir selbst ist auch erst durch einen aktuellen Thread hier aufgefallen, dass ich bei den meisten Listen-Formatierungen (auch im Kapitel über CSS-basierte Layouts) aus alter Gewohnheit völlig unnötig list-style:none neben der display-Angabe definiert habe.

freundliche Grüße
Ingo

[Joachim]

Hi,

Beim IE rutscht der Content Bereich in die nächste Zeile. Ich weiss auch warum: Anscheinend reicht ihm der Platz nicht aus,

3px bug? Verleihe dem betreffenden gefloateten div mal die Css-Eigenschaft display:inline, natuerlich in conditional comments vor modernen Browsern versteckt.

Gruesse, Joachim