XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   footer stick alt -> unerwünschter Spalt in FF (http://xhtmlforum.de/showthread.php?t=41349)

fidel 16.08.2006 00:05

footer stick alt -> unerwünschter Spalt in FF [gelöst]
 
Um zu erreichen, dass der footer stets am Browserende resp. am Ende der Seite erscheint, versuchte ich mich mit dem footer stick alt. Nun erscheint jedoch im Firefox (mal nicht im IE :? ) ein Spalt unterhalb des 100%-ig hohen div-Bereichs, jedoch nur, wenn die Seite über den Viewport geht. Insofern die Seite kleiner als der Viewport ist, erscheint dieser Balken nicht....
Ja ich weiss, das klingt sehr verwirrend!.. So siehts in etwa aus:

http://hektor.dyndns.org/Spalt_inFF.JPG

Seltsamerweise tritt dieses Problem wirklich erst dann auf, wenn der Seiteninhalt höher als der Viewport ist, das Problem erscheint nur im Firefox...
Um dieses Layout umzusetzen verwende ich folgende CSS Eigenschaften:
Code:

body, html {height: 100%;}

body {
        margin: 0;
        padding: 0;
        background:url(pics/Background.jpg) repeat;
        }
#totalhg {
        float: right;
        color: black;
        background:url(pics/bg_bottom-layer.jpg) repeat-y;
        width: 950px;
        min-height: 100%;
        }
#footer {
        float: right;
        margin-top: -20px;
        width: 950px;
        color: black;
        background:url(pics/footer.jpg) no-repeat;
        }
* html #totalhg {height: 100%;}

In html schliesslich:
Code:

<body>
  <div id="totalhg">
  </div>
  <div id="footer">
  </div>
</body>

Der Übersicht halber hab ich offen gestanden das ganze etwas gekürzt und vereinfacht, footer und totalhg sind selbst noch weiter unterteilt und weisen wiederum verschachtelte div-Blöcke auf. Doch diese sollten ja die beiden obigen nicht tangieren, da sie bloss einen Teil der obigen Blöcke darstellen.
Hat irgendjemand eine Idee, wie dieser unerwünschte Spalt im Firefox zustande kommt?
Danke!

heiko_rs 16.08.2006 00:48

Mit dem von Dir geposteten Code tritt das Problem in meinem FX nicht auf, weder mit viel Inhalt im Haupt-Container (d.h. Scrollbar erscheint), noch ohne.

Was mir nur auffällt: Du hast keine Höhe für den Footer definiert, was man aber sollte, wenn alles pixelgenau passen soll. Das dürfte allerdings nicht die Ursache des Problems sein.

Ich kann mir auch nicht vorstellen, daß es mit dem Floaten zu tun hat; dennoch: Was passiert, wenn Du bei beiden Containern das float: right; durch margin: 0 0 0 auto; bzw. margin: -20px 0 0 auto; ersetzt?

fidel 16.08.2006 02:14

Danke für den Tipp! Hierfür sind jedoch sehr viele Anpassungen an meinem ganzen Stylesheet nötig. Die ganze Seite wird von unterschiedlichen wrappern verpackt, welche mit gekachelten Hintergrundbildern arbeiten und mit Blöcken gefüllt wird. Die Blöcke sind allesamt mittels floating, margin und width angeordnet. An den Seiten des Footers selbst sind noch zwei farbige Balken, die 200 px nach oben (sozusagen in den Hauptinhalt) ragen. Nun hab ich alles ausser dem footer in den Block "totalhg" platziert. Der footer dient schliesslich auch noch als wrapper. Dahinein platzierte ich zwei weitere wrappers, die die seitlichen Hintergrundbilder setzen. Die erhalten dann auch die Höhenangabe der 200px für den footer. Im footer selbst wird im Stylesheet noch ein horizontaler Balken als Hintergrund gesetzt, mittels
Code:

background:url(pics/q-x-footer.jpg) 225px 178px no-repeat;
Wenn das nun doch was an dem Verhältnis dieser beiden Blöcke "totalhg" und "footer" ändert, so kann ich natürlich auch mal das ganze Stylesheet posten...

heiko_rs 16.08.2006 05:07

Markup & CSS wären hilfreich. Wenn möglich, so reduziert, daß das Problem zwar noch auftritt, aber dennoch die Codes schneller nachvollziehbar sind (spart Zeit).

Was noch interessant wäre: Was passiert, wenn Du den negativen margin-top des Footers aufhebst (d.h. auf Null setzt)? Beginnt er dann bei wenig Inhalt immer genau unter dem Browserfenster, und gibt es auch dann eine Lücke unterhalb des Footers, wenn viel Inhalt auf der Seite steht? (kann eigentlich nicht sein.)

fidel 16.08.2006 09:57

Es wäre sehr viel Text, diesen abzuändern, würde für mich ne Ewigkeit dauern...
Hab die Seite mal online geschaltet:
http://q-x.hektor.dyndns.org
das Stylesheet liegt unter:
http://q-x.hektor.dyndns.org/view/design/qx-design/q-x.css
So ist auch der Effekt gleich ersichtlich: Auf der Einstiegsseite klappt alles noch wies soll, sobald man auf einen Link klickt, wird die Seite höher als der Viewport und es erscheint der Spalt...
Hab nochmals die Höhen überprüft, sollten alle stimmen! Kanns mir einfach nicht erklären... :(
Danke!

fricca 16.08.2006 10:18

Ich würde sagen, das ist die Zeilenhöhe des clearfix-Punktes.
Setz mal in der clearfix-Klasse auch font-size auf Null.

edit: du weißt, dass bei schmalem Browserfenster deine Inhalte unerreichbar nach links verschwinden?

heiko_rs 16.08.2006 10:34

Zitat:

Zitat von fricca
Setz mal in der clearfix-Klasse auch font-size auf Null.

Mit Pech spielt Opera mit seiner Mindestschriftgröße da nicht mit (natürlich nur relevant, falls der Fehler im Opera überhaupt auftritt). Aber im Prinzip braucht er doch eh keinen Clearfix, da ja eh alles floatet (bzw. problemlos gefloatet werden kann); sogar #totalhgabout floatet.

fricca 16.08.2006 10:53

Zitat:

Zitat von heiko_rs
Aber im Prinzip braucht er doch eh keinen Clearfix, da ja eh alles floatet

... was ich so nicht machen würde, da die Inhalte nach links verschwinden.
Erwähnte ich schon, dass ich kein(e) "clearfix"-Freund(in) bin? Ich würde ein ganz normales hardkodiertes clear einsetzen (in Form einer hr).

fidel 16.08.2006 10:54

Ich brauch im letzten wrapper die Klasse "clearfix", da andernfalls die Kachelung der Hintergrundbilder nicht wie gewünscht durchläuft.
Zitat:

Zitat von fricca
Ich würde sagen, das ist die Zeilenhöhe des clearfix-Punktes.
Setz mal in der clearfix-Klasse auch font-size auf Null.

ES KLAAAPPT!!!! DAAAANKEEE!!!
Zitat:

Zitat von fricca
edit: du weißt, dass bei schmalem Browserfenster deine Inhalte unerreichbar nach links verschwinden?

In der Tat! Jedoch auch wieder nur im Firefox. Dürfte doch eigentlich auch nicht sein!? Ich gebe doch für beide Blöcke eine Breite von 950px an!?...

edit: fricca: Wie meinst Du das genau, ein "hardkodiertes clear in Form einer hr"?...

fricca 16.08.2006 11:01

Zitat:

Zitat von fidel
ES KLAAAPPT!!!!

Vorsicht, teste das mal auch in älteren FF-Versionen. Ich bin nicht sicher, ob das immer klappt.
Die wenigsten Probleme macht IMHO ein hardkodiertes clear ...

Zitat:

In der Tat! Jedoch auch wieder nur im Firefox.
Ist das nur im FF so? Habe ich nicht gestestet.
Wenn du rechtsbündigen Inhalt willst, sollte es ein margin-left:auto; margin-right:0; doch auch tun? Gibt's da Probleme?

Nochwas: wenn du nicht viele verschiedene "wrapper" einsetzen würdest, sondern jeweils dem body-Element eine spezielle ID geben würdest und dann über Nachfahrenselektoren deine Elemente ansprechen würdest, dann könntest du dein Stylesheet extrem verschlanken.

Zitat:

Wie meinst Du das genau, ein "hardkodiertes clear in Form einer hr"?
Als letztes Element in dem Element mit den floats ein hr-Element mit clear.


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:18 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023