Firefox/Opera: Margin für div-Bereich unterschiedlich dargestellt

[althoffc]

Hallo,

Firefox und Opera scheinen die Margin-Werte für einen div-Bereich unterschiedlich zu interpretieren bzw. Bezug zu unterschiedlichen Elementen zu nehmen.

Ich habe eine div für die Navigation (links), Inhalt (Mitte) und eine Info-Spalte (rechts).
Für den Inhalt habe ich im CSS-File für div#inhalt einen Rand (margin = 200px)
eingestellt.

Firefox bezieht diesen Rand/Abstand auf die Info-Spalte (div#info), Opera geht vom rechten Rand des Browser-Fensters aus.

Welches Verhalten entspricht denn eher dem W3C-Standard?
Wie kann ich dieses Problem "Browser-Kompatibel", also ohne Browserweiche, lösen?

Zur Veranschaulichung habe ich den Fall auf Malteser Konstanz nachgestellt.
Login als Benutzer "typo3" und Passwort "typo3".

Gruß, Carsten

 

[Efchen]

Firefox bezieht diesen Rand/Abstand auf die Info-Spalte (div#info), Opera geht vom rechten Rand des Browser-Fensters aus.

Auch Firefox geht da normalerweise vom Rand des Fensters aus.

Markier Dir Deine Bereiche mal alle, entweder mit einem farbigen Rahmen oder einer Hintergrundfarbe, oder besorg Dir das Plugin "Firebug", damit kann man solche Probleme wunderbar nachvollziehen.

Welches Verhalten entspricht denn eher dem W3C-Standard?

Ein Block-Element geht immer von ganz links nach ganz rechts (unter Berücksichtigung von margin/padding natürlich, auch der übergeordneten Elemente.
Wird ein Element gefloatet, so wie hier, "verschwindet" das nicht gefloatete Block-Element hinter dem anderen und geht doch wieder bis zum Rand des Fensters. Ein margin geht daher vom Fensterrand aus und nicht von dem gefloateten Element.

Wie kann ich dieses Problem "Browser-Kompatibel", also ohne Browserweiche, lösen?

Ich gehe davon aus, dass da irgendwo noch ein Bug drin ist. Im Standard Mode reagiert sogar der IE richtig.

Gruß,
-Efchen

 

[althoffc]

Hallo Efchen,

ich habe mir jetzt das Add-On 'Firebug' installiert. Das ist ja wirklich ein gutes Tool. Danke für den Tipp. :)

Leider habe ich aber die Ursache für die Unterschiedliche Darstellung nicht erkannt.
Die divs habe ich jetzt auch mit einem Rand und unterschiedlichen Hintergrundfarben kenntlich gemacht.
Auf der zuvor angegebenen Seite Malteser Konstanz und dem Login kann auf der Testseite die unterschiedliche Darstellung zwischen Firefox und Opera nachvollzogen werden.
(Für IE verwende ich ein anderes HTML-Template und CSS-File).

Kannst Du vielleicht einen Fehler im CSS oder dem HTML-Template erkennen?

Gruß, Carsten

 

[Efchen]

Hallo,

abgesehen davon, dass ich bisher auf der Startseite geguckt habe, sehe ich jetzt aber auch immer noch nichts. Und die Möglichkeiten, ausführlich zu testen habe ich jetzt hier nicht. Entferne im Zweifelsfalle mal die anderen Bereiche und lass nur noch inhalt und info stehen. Ohne margin-right muss inhalt bis unter info an den rechten Fensterrand gehen, weil info floatet.
Irgendwo muss ja ein Fehler sein. Im Zweifellsfalle baust Du nochmal eine nahezu leere Datei nur mit den beiden Elementen und guckst, wie die sich in den Browsern verhalten. Verhalten die sich da anders als auf der Site, dann hast Du irgendwo einen Fehler drin.

Viel Erfolg,
-Efchen

 

[althoffc]

Hallo Efchen,

Du kannst Dich, wie ich im Eingangsposting beschrieben habe, als Benutzer
'typo3' mit Passowort 'typo3' auf der Seite Malteser Konstanz im Mitgliederbereich (ganz unten im Nav-Menü) anmelden.
Dort habe ich auf einer Testseite die Situation mit der unterschiedlichen Darstellung zwischen Firefox und Opera nachgestellt.
(Auf der eigentlichen Seite arbeite ich noch mit Browserweichen, so dass dort die Seiten (fast) wie gewünscht bei Opera, Firefox sowie IE aussehen.)

Gruß, Carsten