✔ Footer paßt sich nicht exakt im IE an

[Denniz]

Hallo,
ich habe das Grundlayout für meine Page soweit fertig.
Das Layout paßt sich der Browsergröße dynamisch an.
Im FF funktioniert es wunderbar aber im IE6 paßt sich der Footer nicht genau am unteren Browserfenster an. Es erscheint dort die scrollbar mit der man noch ein Stück nach unten scrollen kann. Wenn ich den gesamten Footer herausnehmen dann funktionert es.
Was ist an meiner Footerregel falsch?
http://schrottplatz.pytalhost.com/test/index_test.php

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

html, body {
height:100%;
background: #FFFFFF url(../_images/bg.gif) repeat-y center;
}

#container {
height:100%;
background:url(../_images/bgheader.gif) repeat-x  top;
width:100%;
}

#wrapper {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto;
background: url(../_images/bgwrapper.gif) repeat-y;
width:802px;
}

#maincontainer {
width:800px;
height:100%;
margin-left:1px;
}

#mainheader {
height:164px;
background:url(../_images/bgheader.gif) repeat-x  top;
width:100%;
}

#footercontainer {
width:100%;
height:8px;
margin-top:-8px;
}

#footer {
margin:0 auto;
width:100%;
height:8px;
background:url(../_images/bgfooter.gif) repeat-x;
}

 

[Maik]

Erweiter mal die beiden Selektoren #footercontainer und #footer mit der overflow:hidden-Eigenschaft.

 

[Denniz]

Ja mit overlow geht's.

Ich habe jetzt einfach mal etwas content in die Page gepackt aber dabei wird mein Layout im FF zerschossen. Im IE siehts dafür aber normal aus.
Also der footer verschiebt sich im FF nach rechts.
Ich habe zwar den div in dem der content drin ist gefloatet aber danach wieder gecleart.
Das muß man doch machen,oder?
Aber wieso zerschießt er mir trotzdem das layout im FF?
Hab das ding nochmal hochgeladen.
http://schrottplatz.pytalhost.com/test/index_test.php

Meine aktuelle CSS:

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

html, body {
height:100%;
background: #FFFFFF url(../_images/bg.gif) repeat-y center;
}

#container {
height:100%;
background:url(../_images/bgheader.gif) repeat-x  top;
width:100%;
}

#wrapper {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto;
background: url(../_images/bgwrapper.gif) repeat-y;
width:802px;
}

#maincontainer {
width:800px;
height:100%;
margin-left:1px;
}

#mainheader {
height:164px;
background:url(../_images/bgheader.gif) repeat-x  top;
width:100%;
}

#maincontent {
border:1px solid black;
float:left;
width:600px;

}

*html #maincontent {
float:left;
width:600px;
}

#rightcontent {
float:left;
width:138px;
}

#footercontainer {
width:100%;
height:8px;
margin-top:-8px;
overflow:hidden;
}

#footer {
margin:0 auto;
width:100%;
height:8px;
background:url(../_images/bgfooter.gif) repeat-x;
overflow:hidden;
}

#clear {
clear:both;
}

 

[Maik]

Hier der erweiterte CSS-Code:

/*-------------mainbody-----------*/

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

html, body {
height:100%;
background: #FFFFFF url(../_images/bg.gif) repeat-y center;
}

#container {
min-height:100%;
height:auto !important;
height:100%;
background:url(../_images/bgheader.gif) repeat-x  top;
width:100%;
}

#wrapper {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto;
background: url(../_images/bgwrapper.gif) repeat-y;
width:802px;
}

#maincontainer {
width:800px;
height:100%;
margin-left:1px;
}

#mainheader {
height:164px;
background:url(../_images/bgheader.gif) repeat-x  top;
width:100%;
}

#maincontent {
padding-bottom: 8px;
}

#footercontainer {
width:100%;
height:8px;
margin-top:-8px;
overflow:hidden;
}

#footer {
width:100%;
height:8px;
background:url(../_images/bgfooter.gif) repeat-x;
overflow:hidden;
}

 

[Denniz]

Ja das funktioniert wenn ich nur einen container habe in dem mein content ist.

Ich habe aber zwei container (maincontent,rightcontent) welche ich floate und in diese soll dann der content.
Hab diese jetzt mal zu besser übersicht mit einem border versehen und einen text reingepackt.
Ich cleare zwar die flaots aber irgendwie bringt es nichts da sich der footer trotzdem verschiebt (im FF).
Hier nochmal die datei.
http://schrottplatz.pytalhost.com/test/index_test.php

Ist das clear div an der falschen stelle? Hab schon probiert es an einer anderen Stelle zu markieren aber der footer verschiebt sich weiterhin.

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

html, body {
height:100%;
background: #FFFFFF url(../_images/bg.gif) repeat-y center;
}

#container {
min-height:100%;
height:auto !important;
height:100%;
background:url(../_images/bgheader.gif) repeat-x  top;
width:100%;
}

#wrapper {
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto;
background: url(../_images/bgwrapper.gif) repeat-y;
width:802px;
}

#maincontainer {
width:800px;
height:100%;
margin-left:1px;
}

#mainheader {
height:164px;
background:url(../_images/bgheader.gif) repeat-x  top;
width:100%;
}

#maincontent {
padding-bottom: 8px;
width:650px;
border:1px solid red;
float:left;
}

*html #maincontent {
float:left;
width:600px;
}

#rightcontent {
float:left;
width:140px;
border:1px solid green;
}

#footercontainer {
width:100%;
height:8px;
margin-top:-8px;
overflow:hidden;
}

#footer {
margin:0 auto;
width:100%;
height:8px;
background:url(../_images/bgfooter.gif) repeat-x;
overflow:hidden;
}

#clear {
clear:both;
}

 

[Maik]

Probier es mal mit float:right:

#rightcontent {
float:right;
width:140px;
border:1px solid green;
}

Desweiteren empfiehlt es sich, dem DIV #clear eine minimale Schriftgröße zu verpassen, um sicher zu stellen, daß die Gecko-Browser den normalen Textfluss fehlerfrei herstellen:

#clear {
clear:both;
font-size: 1px;
}

<div id="clear">&nbsp;</div>

 

[Denniz]

Ja mit der minimalen schriftgröße funktioniert es.
Besten Dank für die vielen Tips und deine Nervenstärke.

 

[Maik]

Ich muß mich bei dir entschuldigen, denn mein vorletzter Vorschlag bzgl. des Footers

#container {
min-height:100%;
height:auto !important;
height:100%;
background:url(../_images/bgheader.gif) repeat-x  top;
width:100%;
}

hat zur Folge, daß das Wrapper-DIV bei wenig Inhalt im Firefox nicht mehr bis zum unteren Fensterrand ausgedehnt wird.

Stattdessen erwartet FF die clear-Regel, damit der Footer bei zunehmenden Inhalt nach unten wandert:

#footercontainer {
clear:both;
width:100%;
height:8px;
margin-top:-8px;
overflow:hidden;
}

 

[Denniz]

Hallo Michael,
besten dank für die Info.