zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden footer stick alt -> unerwünschter Spalt in FF

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 16.08.2006, 00:05
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2004
Beiträge: 32
fidel befindet sich auf einem aufstrebenden Ast
Standard 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%;}
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!

Geändert von fidel (16.08.2006 um 14:35 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.08.2006, 00:48
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.08.2006, 02:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2004
Beiträge: 32
fidel befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #4 (permalink)  
Alt 16.08.2006, 05:07
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
  #5 (permalink)  
Alt 16.08.2006, 09:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2004
Beiträge: 32
fidel befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #6 (permalink)  
Alt 16.08.2006, 10:18
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 16.08.2006, 10:34
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 16.08.2006, 10:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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).
Mit Zitat antworten
  #9 (permalink)  
Alt 16.08.2006, 10:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.11.2004
Beiträge: 32
fidel befindet sich auf einem aufstrebenden Ast
Standard

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"?...

Geändert von fidel (16.08.2006 um 10:57 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.08.2006, 11:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.

Geändert von fricca (16.08.2006 um 11:03 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:55 Uhr.