✔ Fusszeile im FF nicht an letzter Position

Y

yajamahe

Grünschnabel
Hallo Gemeinde,
ich arbeite mich gerade in CSS ein.
ich habe ein Problem mit der Fusszeile.
Im IE6 wird die Fusszeile richtig, wie ich es möchte, dargestellt, im Firefox 3.0.3 nicht.

In allen(aktuellen) Browsern soll die Fusszeile ganz unten, nach dem inhalt des letzten Fensters dargestellt werden.

Was mache ich da falsch?

Danke für das lesen und eventuellen Antworten.
René


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body, html, #Menu1Left, #container, #inhalt, #Menu1Rechts, #Content {
	margin:0;
	padding:0;
	font-size: 12px;
}
body {font:100.1% sans-serif;

background-color:#E6DCCF;
text-align: center;  /* Aller Text in allen Boxen wird centriert */
}
#container {
	/*width: 59.9em; */ /* 1em ist gleich z.B. 11pt*/
    width:900px;
	text-align:left;
	background-color:#E6B873;
	height: 600px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	min-height: 100%;
	min-height: 600;
/*	background-image: url(csshintergrund.png);
	background-repeat: repeat;*/
}
#TopHeader {
	z-index:0;
	background-color: #993366;
/*	background-image: url(backsteine.png);
	background-repeat: repeat;*/
}
#TopMenue {
	z-index:1;
	background-color: #0033CC;
}
#MenuLeftContainer {
	width: 20%; 
	float:left;
	z-index:2;
	background-color: #CC9933;
}
#MenuLeft {
	z-index:2;
	background-color: #CC9933;
	padding: 10px;
}
#MenuRechtsContainer {
	width: 20%;
	float:left;
	z-index:3;
	background-color: #00CCCC;
}
#MenuRechts {
	z-index:3;
	background-color: #9999CC;
	padding: 20px;
}
#ContentContainer {
	width: 59.5%;
	float:left;
	left: 20%;
	top:0px;
	z-index:4;
	background-color: #99CCFF; 
}

#ContentTopMenue {
	z-index:4;
	background-color: #9966FF; 
}
#Content {
	z-index:4;
	background-color: #CCCCFF;
	padding: 10px;
}

#Fusszeile {   /* Fusszeile aus dem Container raus */
	text-align:center;
	padding:10px;
	z-index:5;
	background-color: #996633;
	height: 20px;
 	bottom: 0px; 
	width:880px;
	text-align:left;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
-->
</style>
</head>

<body><br />
<div id="container">

<div id="TopHeader">top <br />top <br />top <br />top <br /> top</div>

<div id="TopMenue">top <br />top <br />top <br />top <br /> top</div>

<div id="MenuLeftContainer"><br />
<div id="MenuLeft">Menu1 1 <br />Menu1 2 <br />Menu1 3 <br />Menu1 4 <br />Menu1 5 <br />Menu1 6 <br />Menu1 7 <br />Menu1 8 <br /></div><br /><br />
<div id="MenuLeft">Menu1 1 <br />Menu1 2 <br />Menu1 3 <br />Menu1 4 <br />Menu1 5 <br />Menu1 6 <br />Menu1 7 <br />Menu1 8 <br /></div>
</div>

<div id="ContentContainer">
<div id="ContentTopMenue">Rene</div>
<div id="Content">Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> Content <br /> </div>
</div>

<div id="MenuRechtsContainer"><br />
<div id="MenuRechts">Menu 1 rechts <br />Menu 2 rechts <br />Menu 3 rechts <br />Menu 4 rechts <br />Menu 5 rechts <br />Menu 6 rechts <br /></div><br />
<div id="MenuRechts">Menu 1 rechts <br />Menu 2 rechts <br />Menu 3 rechts <br />Menu 4 rechts <br />Menu 5 rechts <br />Menu 6 rechts <br /></div>
</div> 


</div>  <!--   Ende - container  -->

<div id="Fusszeile">Fusszeile </div>

</body>
</html>
 
Hi,

deinem Stylesheet zufolge hast du die Floatumgebung mittels clear:left im Footer nicht wieder aufgehoben.

mfg Maik
 
Hab da noch einen Verbesserungsvorschlag, damit der Hintergrund von #container in den standardkonformen Browsern auch bis zum Footer reicht :)

Code: 
#container {
        /*width: 59.9em; */ /* 1em ist gleich z.B. 11pt*/
    width:900px;
        text-align:left;
        background-color:#E6B873;
        /*height: 600px;*/ 
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
        min-height: 600px; /* Mindesthöhe in modernen Browser */
        height:auto !important; /* auto-height mit !important-Regel für moderne Browser, damit sie die nachfolgende height-Deklaration ignorieren */
        height:600px; /* Mindesthöhe in IE6 und älter */
/*        background-image: url(csshintergrund.png);
        background-repeat: repeat;*/
}

Code: 
<div id="Fusszeile">Fusszeile </div>
</div>  <!--   Ende - container  -->

</body>
</html>


mfg Maik
 
Blicks zwar noch nicht genau, aber der Effekt ist genial.
Rechts und links sind nun die unbenutzen Fläschen gefüllt, bzw. einheitlich.
Hatte mich schon darüber gewundert und wollte dem nachgehen.
Ja Klasse!
Nochmals Danke
René
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück