|
|||
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: 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%;} Code:
<body> <div id="totalhg"> </div> <div id="footer"> </div> </body> Hat irgendjemand eine Idee, wie dieser unerwünschte Spalt im Firefox zustande kommt? Danke! Geändert von fidel (16.08.2006 um 14:35 Uhr) |
Sponsored Links |
Sponsored Links |
|
|||
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? Geändert von fricca (16.08.2006 um 10:22 Uhr) |
|
||||
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"?... Geändert von fidel (16.08.2006 um 10:57 Uhr) |
Sponsored Links |
|
|||
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:
Geändert von fricca (16.08.2006 um 11:03 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Footer Stick Alt: Float Inhalte werden rausgeschoben | tranmatet | CSS | 4 | 12.03.2011 14:50 |
Lücke unter Footer bei Footer Stick Alt und keine farbe im IE | McFarlane | CSS | 9 | 11.09.2008 09:06 |
Footer Stick Alt - funktioniert nicht wirklich | HaraldMenza | CSS | 1 | 03.12.2007 23:47 |
footer stick alt bei viel Text ? | dr4g0n | CSS | 4 | 10.09.2006 19:27 |
footer stick alt tut nicht wirklich, was es soll | E|H | (X)HTML | 16 | 01.01.2006 20:15 |