css: div ist in moz und ns zu kurz

[hotdog]

hallo puristen!

Ich versuche mich erstmals auch an einem rein css basiertem layout und habe ein problem:
in mozilla und ns 6 und 7 umschließt der div-container "center“ nicht den gesamten contentbereich (was er aber tun sollte) sondern nur den header,
in ie6 und op funktioniert es so wie´s sollte.
Könnt ihr mir einen tipp geben?
der link

hotdog

[Terry]

Versuchs mal mit display:table-cell; für den content-layer.

Und noch ein Tipp: wenn Du reine CSS-Layouts baust, dann nimm besser einen Doctype, in dem alle Browser im Standard-Modus sind - sonst wirst Du immer Breiten - und Höhenunterschiede zwischen IE/Opera und Mozilla/Netscape haben.

[hotdog]

danke: display:table-cell hat den gewünschten effekt gebracht.

allerdings überlappt jetzt in diesen browsern (ns 6 und 7, moz) die over-graphik aus dem menü den container "main" etwas.

das problem mit den doctypes und der url ist: sobald ich die url dazusetze, stellt es mir in ie6 den den gesamten container breiter dar und das headerbild ist dann nicht mehr zentriert, sondern rechts ein größerer abstand als oben und links.
nachdem statistisch noch immer mehr leute den ie verwenden als ns/moz, möchte ich die darstellung zumindest im ie fehlerfrei haben.

oder hast du noch einen tipp, wie ich den header im ie zentriert haben kann UND das menü in moz/ns den inhaltsbereich nicht überlappt?

hotdog

[prefix]

stichwort: box-model-bug :zwinker

[hotdog]

o gott, jetzt trifft mich das auch mal...
werd mal in klausur gehen müssen ;-)
danke für das stichwort.
meld mich dann wieder.
bis später

hotdog

[hotdog]

inzwischen habe ich mich etwas schlauer in sachen tanteks hack, box model und doctypes gemacht und konnte einige fehler korrigieren.

also eigentlich habe ich an meiner seite wild in den doctype-deklarationen und im css herumgepfuscht: die seite ist jetzt validiert, ein paar fehler sind korrigiert.
ich habe aber immer noch keinen grund gefunden, warum der fussnoten-bereich (das ist die untere navigationszeile) in den gecko-basierten browsern unten zur hälfte über den center bereich herausragt und links eingerückt und rechts zu weit rausgerückt ist.
der abstand zwischen header und contentbereich ist auch nicht in allen browsern gleich. – sollte jetzt aber doch eigentlich, oder?

nach all der plackerei bin ich inzwischen überhaupt nicht mehr überzeugt davon bin, dass es sich auszahlt, soviel mühe in ein css-layout zu stecken, wenn dann doch wieder nur hacks verwendet werden müssen und ich de facto doch in sehr vielen browsern die darstellung kontrollieren muss um sicherzugehen, dass es klappt.

der neue link

gibt´s noch tipps?

hotdog (...needs some pep-talk)

[Terry]

Zitat von hotdog

ich habe aber immer noch keinen grund gefunden, warum der fussnoten-bereich (das ist die untere navigationszeile) in den gecko-basierten browsern unten zur hälfte über den center bereich herausragt und links eingerückt und rechts zu weit rausgerückt ist.

Der Footer ist ausserhalb von #content - deshalb reicht die Hintergrundfarbe unten nicht... - Setze den <div id="footer"> mal noch in den Content-Layer rein - dann zieht sich der Hintergrund bis nach unten.

der abstand zwischen header und contentbereich ist auch nicht in allen browsern gleich. – sollte jetzt aber doch eigentlich, oder?

Frag mich bitte nicht, wieso (prefix?) - aber die Geckos reagieren da nicht auf margin-top - nimm statt dessen padding-top für den #content, um den Abstand zum Header zu bestimmen - das akzeptieren alle.

nach all der plackerei bin ich inzwischen überhaupt nicht mehr überzeugt davon bin, dass es sich auszahlt, soviel mühe in ein css-layout zu stecken, wenn dann doch wieder nur hacks verwendet werden müssen und ich de facto doch in sehr vielen browsern die darstellung kontrollieren muss um sicherzugehen, dass es klappt.

Tja, die Frage ist sicher eher philosophisch - irgendwie sind es aber nur ein paar Hacks, die dann immer wieder kommen. (wenn man denn erst einmal verstanden hat, wie das Boxmodel geht, was Doctypes bewirken und wie man positionieren kann... )
Ein exakt pixelgenaues Aussehen ist aber trotzdem oft schwer und benötigt noch viele Zusatzangaben, die den Quelltext dann doch wieder überladen - Frage ist halt auch, ob das wirklich unbedingt nötig ist - solange man darauf achtet, dass die Seite überall funktioniert und "vernünftig" aussieht.
Die wenigsten Leute werden sich die Seiten mit mehreren unterschiedlichen Browsern anschauen (mal ausgenommen die Kritiker hier im Forum )

Deine Seite gefällt mir übrigens gut!

[hotdog]

@terry:
oje: ich komm mir ja vor wie ein idiot. da mach ich schon schematische skizzen, wie die blöden div´s angeordnet sind und dann übersehe ich, dass die entscheidenden eigenschaften im untergeordneten div definiert sind.
- danke, das mit dem footer war genau der fehler.
und das padding-top hat´s auch gebracht.

daß dir die seite gefällt, freut mich natürlich, danke für das lob.

vielen dank für die hilfe
hotdog