[CSS] - Sticky-Footer in Chrome macht Probleme

[damomo3392]

Hallo, bin absoluter Neuling habe noch mal ein Problem. Auf meiner Seite soll sich am Ende ein Footer befinden, der in allen von mir ausprobierten Browsern (Firefox, IE, Opera) keine Probleme macht. Mit Chrome jedoch hapert es leider - Mein Footer steht hier mitten in der Seite und nicht am unteren Ende. Ich habe schon andere Threads diesbezüglich gefunden und bin wohl nicht der Einzige, der Probleme mit Chrome hat, aber helfen konnte mir davon nichts, da vieles "Neuland" für mich war. Vielleicht kann es mir hier noch mal einer sachlich erklären.

<div id=Fussbereich>
	<table>
		<tr>
			<td class=Fussbereich_Inhalt><a href="FAQ.html">FAQ</a></td>
			<td class=Fussbereich_Inhalt><a href="Kontakt.html">Kontakt</a></td>
			<td class=Fussbereich_Inhalt><a href="AGB.html">AGB</a></td>
			<td class=Fussbereich_Inhalt><a href="Impressum.html">Impressum</a></td>
		</tr>
	</table>
</div>

* {
	margin: 0px;
	padding: 0px;
}


html{
	min-width: 1900px;
	min-height: 1500px;
	height: 100%;
	}

body {
	position: relative;
	background-image: url("Hintergrund.png");
	font-family: arial, sans-serif;
	font-size: 8px;
	width: 100%;
	min-height: 100%;
	margin: 0 auto;
	}

#Fussbereich {
	position: absolute;
	left: 285px;
	right: 285px;
	bottom: 0;
	width: 1335px;
	background-color: #101010;
	height: 30px;
	}
td.Fussbereich_Inhalt{
	font-family: arial, sans-serif;
	font-size: 18px;
	color: #A8A49F;
	width: 333px;
	text-align: center;
	}

Sicher sind dort noch viele andere Fehler, wovon ich als Laie mal ausgehe, aber eine ausführliche Erklärung wäre nett.

 

[Lawnmower]

vielleicht hilft Dir die Antwort bei Punkt 7 in der FAQ vom XHTML Forum: http://xhtmlforum.de/40267-faq-h-ufig-gestellte-fragen-und.html

 

[F_GXdx]

Statt 0 würde ich mal 0 px probieren bei bottom, streng genommen ist das nämlich falsch.

Desweiteren würde ich mal bei body noch ein Attribut height: 100%; hinzufügen.

 

[palace4d]

So gehts.

#deinFooter {
  height: 100px;
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  background: slategray;  
}

Hier nochmal zum Testen:
http://jsbin.com/ibehub/1/edit

Noch als Hinweis zur Selektorperformance
#meineID --> ist schneller als
div#meineID

 

[flugser]

Noch als Hinweis zur Selektorperformance
#meineID --> ist schneller als
div#meineID

Warum eigentlich? Muss der dadurch 2x durch den DOM?

 

[Tumbleweed]

CSS lint empfiehlt sogar die units wegzulassen für 0-Werte, daher glaube ich nicht, dass das falsch ist. Womit ich nicht sagen will, dass ich CSS lint toll finde.


Und zu dem Unterschied der Selektoren - da Browser von rechts nach links parsen, dürfte keinerlei Unterschied bestehen. Die ID müssen sie beide erstmal finden und falls der Browser bei div#id wirklich nochmal anfängt nach divs zu suchen, hat er nicht lange zu tun.
Ich würde das div aber auch weglassen, weil es sinnlos ist. IDs sind unique.

 

[T. Smith]

streng genommen ist das nämlich falsch.

0px = 0em = 0 = ...
"After a zero length, the unit identifier is optional."

 

[damomo3392]

So gehts.

#deinFooter {
  height: 100px;
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  background: slategray;  
}

Hier nochmal zum Testen:
http://jsbin.com/ibehub/1/edit

In deinem Beispiellink funktioniert es - Habe es mal 1:1 in meinen Code übernommen - Jetzt habe ich durch fixed aber die Leiste immer am unteren Bildschirmrand, selbst, wenn die Seite "länger" ist und ich eig. erst nach unten scrollen müsste, um den Footer zu sehen - Daher hatte ich es vorher mit position: absolute; versucht?!

Kann es an meine festgelegte Höhe von 1500px (min-height: 1500px; ) im Body-Tag liegen?

 

[F_GXdx]

Ja! Mann Gottes...

Das ist es ja, was relative, absolute und fixed heißt, alles funktioniert genau so wie es gedacht ist.

 

[damomo3392]

Aber eben nicht mit Chrome..