nicht angemeldet
Nabend, Teilnehmer,
das Verhalten von Mozilla 1.2b ist mitunter ein klein wenig irritierend... (...) Er darf mir gerne auch verraten, *warum* Mozilla tut, was er tut, mir selbst erschließen sich seine Gründe nämlich nicht so ganz...
Das overflow:hidden ist schuld. Entfernt man es ersatzlos, führt das h1 {height:100%;} dazu, dass das Element eine Höhe von einer Bildschirmhöhe *plus* 2em (vom padding) enthält, das ist wohl bekannt.
Ich habe zwei Alternativversionen erstellt:
http://home.t-online.de/home/dj5nu/fanhost/siechenhaus2.html
http://home.t-online.de/home/dj5nu/fanhost/siechenhaus2o.html
Die erste Version benutzt overflow:hidden, die zweite nicht. Beide bringen das gewünschte Resultat im Mozilla, in der zweiten Version wird im IE lediglich der Strich unter nhaus.de nicht angezeigt, darum habe ich mich noch nicht gekümmert.
Bei der ersten Version musste ich dem body-Element das padding nehmen, weil Mozilla sonst die Überschrift bei top:0; left:0; innerhalb des body positioniert hätte, d.h. die dort, wo padding "Bald in diesem Theater" steht. Den Inhaltsbereich habe ich mit einem eigenen Container positioniert, woraufhin jedoch kein frei fließender Inhalt (position:static) im body mehr ist, was dazu führt, dass *gar* nichts angezeigt wird, weil die Größe des html-Elements null ist. Dagegen kann man mit html, body {height:100%; width:100%;} vorgehen.
Die zweite Version umgeht die Notwendigkeit von overflow:hidden, indem ein div-Element h1 einschließt und anstelle dessen positioniert wird und height:100% erhält. Somit wird zu den 100% nicht noch das padding hinzugezählt.
Anders als mit so einer Verschachtelung geht es nicht, bspw. wenn man h1 ein padding von 1em (100% der Standardschriftgröße) geben möchte, bedeutet h1 {padding:1em;} natürlich 1em mal die Schriftgröße des h1-Elements. Wenn man hier wirklich 1em haben möchte, kommt man um einen Container mit font-size:inherit nicht umhin.
Die Ironie der ganzen Sache ist, dass der Internet Explorer beide Seiten nur richtig anzeigt (bis auf den Strich), weil die XML-Deklaration bei ihm den quirks mode auslöst. Würde er im Konformitätsmodus rendern, würde er bei der zweiten Version das div {height:100%;} ignorieren. Wenn man dies durch ein body {height:100%;} kompensiert, hat man wieder das Problem mit dem 100%+padding. Genau dies hätte man auch, wenn man bei der ersten Version die XML-Deklaration herausnimmt, obwohl overflow:hidden gesetzt ist...
Mehr fällt mir leider nicht mehr ein. Vor allem verwirrt mich die Tatsache, dass Mozilla ein komplettes Objekt nicht anzeigt, wenn es sein Elternelement vergrößern würde... so scheint es zumindest, es wird nicht abgeschnitten, sondern gar nicht angezeigt. Oder ich verwechsle etwas, ich habe soviele Phänomene festgestellt und kann die verschiedenen Versionen nicht mehr auseinanderhalten.
Eins steht fest, man kann es relativ problemlos interoperabel kriegen, wenn man ein wenig oder auch ein bisschen viel herumtrickst, bspw. durch o.g. Markuptricks um das Boxmodell zu umgehen.
Mathias