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%;} Code:
<body> Hat irgendjemand eine Idee, wie dieser unerwünschte Spalt im Firefox zustande kommt? Danke! |
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? |
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; |
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.) |
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! |
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? |
Zitat:
|
Zitat:
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). |
Ich brauch im letzten wrapper die Klasse "clearfix", da andernfalls die Kachelung der Hintergrundbilder nicht wie gewünscht durchläuft.
Zitat:
Zitat:
edit: fricca: Wie meinst Du das genau, ein "hardkodiertes clear in Form einer hr"?... |
Zitat:
Die wenigsten Probleme macht IMHO ein hardkodiertes clear ... Zitat:
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:
|
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