✔ Problem: Footer wird nicht ganz unten angezeigt

Status
Nicht offen für weitere Antworten.
mR.fLopPy

mR.fLopPy

Erfahrenes Mitglied
Hallo!

Ich habe folgendes Problem. Auf der Website die ich gerade bearbeite gibt es einen Footer der ganz unten dargestellt werden soll. Anfangs hatte ich mit der Positionierung unter IE6 Probleme. Dem konnte abhilfe geschafft werden.

Jetzt läuft witzigerweise alles Korrekt unter dem IE 6 während FF3 anscheinend mit irgend einem Part in meinem CSS Code ein Problem hat.

Hier der Link - http://www.explo.at/dummie.html

Das Problem ist eigentl. selbsterklärend. Der Text in der Infobox zwingt die Seite zum Scrollen, jedoch geht der Footer u. der dazugehörige Hintergrund nicht mit. Ich vermute dass der Fehler bei der Interpretation von "min-height" unter Firefox liegt, da der IE6 diesen nicht erkennt u. als Referenz "height" nimmt. Ich habe bereits probiert die Befehle zu entfernen, allerdings ohne Erfolg.

Hier nochmal der CSS Code:

Code: 
@charset "utf-8";
/* CSS Document */

html, body { margin-top: 0px; margin-bottom: 0px; height: 100%; background-color: #cccccc; }

table {}

/*-- Text style -----------------*/

a {}
a:link { font-weight: bold; color: #333333; }
a:active { font-weight: bold; color: #333333; }
a:hover { font-weight: bold; color: #333333; }
a:visited { font-weight: bold; color: #333333; }

h3 { margin: 0px; font-size: 12px; font-size: 12px; color: #719DDE; text-decoration: underline; font-weight: normal; }

#wrapper {position: relative; margin: 0px auto; width: 750px; min-height: 100%; height: auto !important ; height: 100%; background-color: #FFFFFF; border-left: 1px solid #000000; border-right: 1px solid #000000; }

#header { height: 190px; background-color:#999999; }

#navigation { height: 49px; background: url(../NaviBackgr.gif); } /* Eventuell auf 50px Höhe erhöhen*/
#navigation .Spacer { float: left; width: 17px; }
#navigation .Home { float: left;}
#navigation .Produkte { float: left;}
#navigation .Termine { float: left;}
#navigation .PcSoftware { float: left;}
#navigation .Kontakt { float: left;}
/* Da das Flashintro beschnitten wurde, muss ein Teil vom Arm nachgeladen werden */
#navigation .PieceOfIntro { float: left; width: 288px; height: 10px; background: url(../bilder/HeaderPiece.jpg) repeat-x; }

#content, #infobox { padding-bottom: 45px; }

#content { float: left; display: block; width: 435px; height: auto; background-color: #333333; }
#content .divFade { height: 8px; background-color:#003399; }
#content .divSpacer { height: 20px; background-color:#000066; }
#content .divMain { }

#infobox { float: right; width: 315px; height: auto; }

#infobox .divTop { position: relative; height: 35px; background: url(../images/InfoboxHeaderBg.gif); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: underline; color: #666666; }
#infobox .divTop .NewsImg { position: absolute; width: 54px; height: 16px; left: 8px; top: 11px; background: url(../images/InfoboxHeaderNews.gif) repeat-x; }
#infobox .divTop .Anmelden { position: absolute; left: 81px; top: 13px; font-weight: bold; color: #333333; }
#infobox .divTop .Sitemap { position: absolute; left: 160px; top: 13px; }
#infobox .divTop .InfoMaterial { position: absolute; left: 222px; top: 13px; }

#infobox .divInfo { }

/*-------------------------------*/

#infobox .divInfo .Box { display: block; margin: 10px; margin-top: 15px; font-family: Tahoma; }
#infobox .divInfo .Box .Pfeil { float: left; background: url(../images/arrow.gif) repeat-x; width: 11px; height: 8px; margin-top: 5px; }
#infobox .divInfo .Box .Header { float: left; margin-left: 5px; margin-bottom: 3px; height: 20px; }
#infobox .divInfo .Box .Text { clear: both; font-size: 11px; line-height: 15px; margin-left: 16px; }

/*-------------------------------*/

#footer { clear: both; position: absolute; left: 0px; bottom: 0px; width: 750px; height: 35px; background: url(../../images/nav_bottom.jpg); font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #666666; }
#footer .Copyright { position: absolute; left: 10px; top: 13px; }
#footer .Impressum { position: absolute; left: 665px; top: 13px; text-decoration: underline; }


.clearfix {display: inline-block; }
.clearfix:after { content:"."; display:block; height:0; font-size:0; clear:both; visibility:hidden; }

PS: Beim Gerüst (also dem Wrapper) habe ich mich an dem Refernzmodell von tutorials.de gehalten.

Ich hoffe ihr könnt mir helfen!

Beste Grüße
floppy
 
Zuletzt bearbeitet:
Hey Maik!

Okay, ich verstehe das Problem - aber ich weiß noch nicht genau wie ich es einsetzen soll bei meinem Problem. Dass die Floatingumgebung innerhalb des Textes aufgehoben gehört ist mir jetzt klar.

Ich kann auch nicht zwei Klassen in einen Container hinein laden. Zumindest hab ich das noch nie gemacht.

Ich habe jetzt die Klasse "Box" als ID angegeben, damit ich zusätzlich als Klasse das "clearfix" angeben kann. Allerdings bewirkt das leider nichts.

beste Grüße
 
Zuletzt bearbeitet:
Zwei CSS-Klassen brauchst du auch nicht aufzurufen, wenngleich das grundsätzlich technisch möglich ist (class="Klassenname_1 Klassenname_2"), denn das Stylesheet wird in deinem Fall auf das DIV#wrapper angewendet.

Code: 
<div id="wrapper" class="clearfix"> ... </div>
mfg Maik
 
Es hat geholfen, allerdings hat das clearfix auch meine Zentrierung aufgehoben bis auf wenige Pixel (habe den Link aktualisiert).

"Margin Auto" scheint jetzt keine Wirkung mehr zu haben.
 
Interessant, ich kann in keinem Browser gegen vorher eine Verschiebungen in der horizontalen Zentrierung feststellen / messen, und ist mir in der Vergangenheit so auch noch nie begegnet :suspekt:

mfg Maik
 
ohje.. d.h. jetzt haben wir 2 die ein Problem bewundern ^_^
Sollte ich doch nochmal meinen CSS überdenken u. die floatings durch feste Positionierungen umgehen? Ich wäre für jeden Vorschlag dankbar.. ich frage mich ob ich mit absoluter Positionierung das selbe Layout erstellen kann.

Eventuell bekommt ja jmd. noch einen Geistesblitz. Ich werde mal drüber schlafen.

beste Grüße
floppy
 
Zuletzt bearbeitet:
mR.fLopPy hat gesagt.:
ohje.. d.h. jetzt haben wir 2 die ein Problem bewundern ^_^
Zum Vergrößern anklicken....
Ich bewundere hier überhaupt nichts, denn wie ich gestern schon schrieb, kann ich durch das "Float-Clearing" keine horizontale Verschiebung des DIVs#wrapper entdecken, und hab das in meiner knapp achtjährigen CSS-Praxis auch noch nie erlebt.

Es tut hier wohl nix zur Sache, aber dennoch würde ich mal im class-Attribut das Leerzeichen vor dem Klassennamen "clearfix" entfernen.

mfg Maik
 
Oh, dann hab ich dich wohl missverstanden. : )
Ich hab es nachträglich bei einer Freundin ausprobiert u. ebenfalls auf meinem Notebook mit Chrome u. Firefox3.

Der Anzeigefehler besteht nachwievor. Nur der IE6 und der IE7 sind bis jetzt in der Lage die Webseite bei mir korrekt darzustellen.

Hier ein Screenshot: http://img262.imageshack.us/my.php?image=unbenannt1cp1.jpg

Das Leerzeichen im class-Attribut habe ich entfernt u. es hat wie du bereits vermutet hast keine Veränderung gebracht.

PS: Ich habe jetzt den CSS-Code oben um die zwei Klassen erweitert. Wenn ich eine Kompatibilitätsprüfung mache, bekomme ich den Fehler dass der Wert "inline-block" und die Eigenschaft "content" nicht unterstützt wird.

beste Grüße
floppy
 
Zuletzt bearbeitet:
Hallo,

der Validator mäkelt an deiner DIV-Suppe herum: "Opening and ending tag mismatch ...". An deiner Stelle würde ich das als erstes in Ornung bringen, bevor du weitere CSS-Experimente startest.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück