CSS Layout - mal wieder

Computer: Software & Programmierung HTML & CSS
#1

Hallo Leute

Ich ärger mich mal wieder mit der Ansicht eines CSS Layouts in den verschiedenen Browsern rum.

Vorweg als erstes wie es denn mal aussehen sollte:

http://de.selfhtml.org/layouts/nr03/vorlage/thema1.htm

So stell ichs mir vor, ganz einfach (?) zwei „Kästen“ übereinander mit bestimmten Abstand voneinander. Allerdings ohne den oberen etwas helleren Bereich mit den Pfeilen und dem „Home“-Link. (Schatten jetzt auch mal außer acht gelassen)

Tja, und wie sollte es auch anders sein, es will nicht so wie ich.

Der IE stellt es vermeintlich „richtig“ dar, und, oh Wunder, Opera auch.
Nur Firefox macht keinen Abstand zwischen den zwei Kästen, sondern setzt den Abstand oben über den ersten Kasten.

HTML und CSS Datei sind hier zu begutachten:

http://home.arcor.de/diemaus29/

Ich bastele schon seid gestern daran rum, und egal was ich ausprobiere, es klappt nicht. IE und Opera gehen, nur Firefox nicht.

Ich weiß einfach nicht, wo ich den (vermutlichen) Denk- und Programmierfehler hab und hoffe mal wieder auf eure kompetente Hilfe :smile:

Gruß
diemaus

Ach ja, IE 6, Opera 7.54u2 und Firefox 1.0.3

#2

So stell ichs mir vor, ganz einfach (?) zwei „Kästen“
übereinander mit bestimmten Abstand voneinander. Allerdings
ohne den oberen etwas helleren Bereich mit den Pfeilen und dem
„Home“-Link. (Schatten jetzt auch mal außer acht gelassen)

Tja, und wie sollte es auch anders sein, es will nicht so wie
ich.

Der IE stellt es vermeintlich „richtig“ dar, und, oh Wunder,
Opera auch.
Nur Firefox macht keinen Abstand zwischen den zwei Kästen,
sondern setzt den Abstand oben über den ersten Kasten.

Bei mir zeigen Opera 8 und FF das gleiche an, nämlich alle Blöcke aneinandergeklebt. Das liegt wahrscheinlich daran, dass du keinerlei margin zwischen den einzelnen Blöcken definierst. Ver such’ z.B. mal, dem #header ein wenig margin-bottom oder dem #inhalt margin-top zu verpassen. Wenn du beides machst fallen die so zusammen, dass der größere Wert den Abstand bestimmt. Du musst außerdem beachten, dass der Margin von Kindelementen unter gewissen Bedingungen aus dem Elternelement „überläuft“.

#3

Hallo Leute

Ich ärger mich mal wieder mit der Ansicht eines CSS Layouts in
den verschiedenen Browsern rum.

Du meinst Du ärgerst Dich mit konformen Browsern und dem IE rum. Der Firefox stellt Dir die Seite garantiert nach den W3C-Standards an. Netscape und Opera haben eine Art „IE-Kompatibilitätsmodus“, sodass sie auch falsche IE-Optimierte Seiten richtig anzeigen können.

Der IE stellt es vermeintlich „richtig“ dar, und, oh Wunder,
Opera auch.
Nur Firefox macht keinen Abstand zwischen den zwei Kästen,
sondern setzt den Abstand oben über den ersten Kasten.

Du hast auch gar keinen Abstand zwischen den divs definiert. Was der IE anzeigt ist erst mal egal.

Ich bastele schon seid gestern daran rum, und egal was ich
ausprobiere, es klappt nicht. IE und Opera gehen, nur Firefox
nicht.

Du solltest vom Firefox-Layout ausgehen, nicht vom IE.

Folgendes funktioniert auf IE und Firefox:
Das CSS:

html, body {
 height:100%;
}
body {
 font-family:Comic Sans MS, Verdana, Arial, sans-serif;
 font-size:12px;
}
#container {
 width:760px;
 margin:0px auto;
 height:100%;
}
#header {
 width:100%;
 padding:10px;
 border:1px solid #a6a6a6;
 background-color:#ebf6fc;
 height:80px;
 float:left;
}

#headernavi {
 border-left:none;
 margin:-10px;
 margin-left: 10px;
 height:100%;
 width:80px;
 padding-top:10px;
 padding-bottom:10px;
 float:right;
}

#inhalt {
 width:100%;
 padding:10px;
 border:1px solid #a6a6a6;
 background-color:#ebf6fc;
 float:left;
 margin-top:30px;
 text-align:justify;
}

#info {
 border-top:1px solid #a6a6a6;
 background-color:#00CC33;
 height:auto;
 width:100%;
 overflow:hidden;
 margin:-10px;
 margin-top:10px;
 padding:10px;
}

Das HTML:

...




 Navi rechts

 Header 


 Lorem ipsum dolor sit amet....

 Infotext

Ein bisschen verschachtelt, dafür kompatibler.
Einen recht guten Überblick über die IE-Bugs mit CSS gibt es hier: http://www.positioniseverything.net/explorer.html
Ich löse das immer, indem ich im Nachhinein ein CSS für den IE anlege, wenn er was nicht versteht. Dieses binde ich nach einer Browserdetection mit PHP nur nur für den IE ein. Bisher hatte ich mit den standardkonformen Seiten auf keinem anderen Browser (außer Urversionen) Probleme.

Schönen Gruß,
Rudy

#4

Hi

Bei mir zeigen Opera 8 und FF das gleiche an, nämlich alle
Blöcke aneinandergeklebt.

Hab gerade mal auf Opera 8 geupdatet, hast recht, da klebt es auch zusammen…

Das liegt wahrscheinlich daran, dass
du keinerlei margin zwischen den einzelnen Blöcken definierst.
Ver such’ z.B. mal, dem #header ein wenig margin-bottom oder
dem #inhalt margin-top zu verpassen. Wenn du beides machst
fallen die so zusammen, dass der größere Wert den Abstand
bestimmt. Du musst außerdem beachten, dass der Margin von
Kindelementen unter gewissen Bedingungen aus dem Elternelement
„überläuft“.

Hab ich gerade mal ausprobiert, wollte nicht funktionieren, aber die Lösung von Rudy funktioniert.

Danke und Gruß
diemaus

#5

Hi

Du meinst Du ärgerst Dich mit konformen Browsern und dem IE
rum.

Jaaa :smile:)

Der Firefox stellt Dir die Seite garantiert nach den
W3C-Standards an. Netscape und Opera haben eine Art
„IE-Kompatibilitätsmodus“, sodass sie auch
falsche IE-Optimierte Seiten richtig anzeigen
können.

Ich habs irgendwie geahnt, das Opera da auch wie der IE rumwurschtelt, hab jetzt mal auf den 8er geupdatet, da zeigt er es wie der FF an.

Du solltest vom Firefox-Layout ausgehen, nicht vom IE.

Ich hatte es versucht, aber nicht hinbekommen :frowning:
Aber deine Lösung funktioniert *freu*

Einen recht guten Überblick über die IE-Bugs mit CSS gibt es
hier: http://www.positioniseverything.net/explorer.html
Ich löse das immer, indem ich im Nachhinein ein CSS für den IE
anlege, wenn er was nicht versteht. Dieses binde ich nach
einer Browserdetection mit PHP nur nur für den IE ein. Bisher
hatte ich mit den standardkonformen Seiten auf keinem anderen
Browser (außer Urversionen) Probleme.

Den Link werd ich mal durcharbeiten.

Danke und Gruß
diemaus