CSS Probleme mit Footer - kein korrekter Abschluss

Status
Nicht offen für weitere Antworten.

TMG

Mitglied
Hi, ich bins schon wieder.

Mein Footer will einfach nicht bündig abschließen. Er ist zwar immer unten, jedoch bleibt da beim Firefox eine kleine Lücke und man sieht auch, dass der Footer am Ende der Hauptbox ist. Beim IE jedoch sieht man, dass der Footer nicht ganz unterhalb der Hauptbox ist, da diese noch ein Stückchen runter geht.

Naja, schaut es euch doch bitte selbst an:

http://www.afa-greifswald.de/crd/index.php?content=impressum&pic=imp

Hier der dazugehörige Code:

HTML:
<body background="bilder/bg.jpg">

<div id="page" class="hauptbox">
     <div id="header"><a href="index.php"><img src="bilder/header.jpg" width="800" height="113" border="0"></a><table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><a href="index.php?pic=welcome" onMouseOver="MM_swapImage('Home','','bilder/home_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/home.jpg" alt="Home" name="Home" width="115" height="29" border="0" id="Home"></a></td>
        <td><a href="index.php?content=preise&pic=price" onMouseOver="MM_swapImage('Preise','','bilder/preise_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/preise.jpg" alt="Preise" name="Preise" width="114" height="29" border="0" id="Preise"></a></td>
        <td><a href="index.php?content=leistung&pic=work" onMouseOver="MM_swapImage('Leistung','','bilder/leistung_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/Leistung.jpg" alt="Leistung" name="Leistung" width="171" height="29" border="0" id="Leistung"></a></td>
        <td><a href="index.php?content=referenz&pic=reference" onMouseOver="MM_swapImage('Referenz','','bilder/referenz_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/referenz.jpg" alt="Referenz" name="Referenz" width="171" height="29" border="0" id="Referenz"></a></td>
        <td><a href="index.php?content=kontakt&pic=contact" onMouseOver="MM_swapImage('Kontakt','','bilder/kontakt_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/kontakt.jpg" alt="Kontakt" name="Kontakt" width="114" height="29" border="0" id="Kontakt"></a></td>
        <td><a href="index.php?content=impressum&pic=imp" onMouseOver="MM_swapImage('Impressum','','bilder/impressum_mo.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bilder/impressum.jpg" alt="Impressum" name="Impressum" width="115" height="29" border="0" id="Impressum"></a></td>
       </tr>
    </table>
  </div>
	 <? /*<div id="leftcontent">
	 
	 </div> */?>
     <div id="rightcontent">
	<?
		  	// Bilder einladen Start
					
					if ($_GET['pic']=='') {
						if (file_exists('content/right/welcome.php')){include ('content/right/welcome.php');} else {}
					}	
					else {if (file_exists('content/right/'.$_GET['pic'].'.php')) {include ('content/right/'.$_GET['pic'].'.php');}
							else {}
					}
				
				// Bilder einladen Ende
		  ?>
	 </div>
     <div id="centercontent"><?
		  	// Inhalte einladen Start
					
					if ($_GET['content']=='') {
						if (file_exists('content/00.php')){include ('content/00.php');} else {include ('content/404.php');}
					}	
					else {if (file_exists('content/'.$_GET['content'].'.php')) {include ('content/'.$_GET['content'].'.php');}
							else {include ('content/404.php');}
					}
				
				// Inhalte einladen Ende
		  ?>
	 </div>
     <div id="footer">
	 <img src="bilder/footer.jpg" width="800" height="27">
	 </div>
</div>
</body>

Und hier das CSS:

HTML:
* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;

}

body {
color:#611416;
background:background-image:url(bilder/bg.jpg);
background:background-color:#FFFFFF;
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */

}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

html, body {
height: 100%;
font-size:12px;
}

/* DIV-Boxen */

div#page {
position:relative;
margin: 0 auto;
width: 800px;
min-height: 100%;
height: auto !important;
height: 100%;
border-left: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
background:background-image:url(bilder/bg_content.jpg);
}

div#header {
height: 142px;
background: #fff;
}

/*
div#topNavi {
top:113px;
height: 29px;
background: #fff;
}
*/

/* div#leftcontent {
margin: 25px 0px;
width: 105px;
float: left;
background-color:#;
padding:5px;
} */

div#rightcontent {
margin: 25px 25px;
width: auto;
float: right;
background-color:#;
padding:5px;
border: 1px dotted #A8A8A8;
}

div#centercontent {
	vertical-align:top;
	margin: 25px 200px 52px 25px;
	background-color:#F9F9F9;
	padding:5px;
	border: 1px dotted #A8A8A8;
}

div#leftcontent, div#rightcontent, div#centercontent {

}

div#footer {
clear: both;
position: absolute;
bottom: 0;
height:auto;
width: 800px;
background: #fff;
border-top: 1px solid #b8b8b8;
}


/* clearfix zum Aufheben der Floatumgebung */

.hauptbox:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.hauptbox {display: inline-block;}

/* Hides from IE-mac \*/
* html .hauptbox {height: 1%;}
.hauptbox {display: block;}
/* End hide from IE-mac */


/* Überschrift */

h2 {
margin-left: 10px;
}
a:link {
	font-weight: normal;
	color: #666666;
	text-decoration: underline;
}
a:hover {
	font-weight: normal;
	color:#687BD2;
	text-decoration: underline;
}
a:visited {
	font-weight: normal;
	color: #666666;
	text-decoration: underline;
}

Ich bin am Verzweifeln.
Maik, ich hoffe du kannst mir wieder helfen. Du machst das super, zumal es die Vorlage aus deinem Tutorial ist :)

Danke nochmal.
 
Hi,

aber sicher kann ich dir da weiterhelfen ;)

Für Firefox:
Code:
.hauptbox:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size:0;
}

Für IE:
Code:
img {
display:block;
}
 
Super.

Vielen Dank Maik.
Ich habe nichts anderes erwartet. Dickes Lob.

Da ich natürlich nicht nur einfach abstauben sonder auch lernen möchte, würdest du mir noch erklären wie das zusammen hängt?

Also ich denke mir das so: Nach der Hauptbox soll die Schriftgröße 0 betragen da der Firefox sonst annimt, dass das da noch irgendetwas schriftenähnliches ist.

Beim IE verstehe ich das jedoch nicht ganz.
Zumal da nun ein hässlicher horizontaler Scrollbalken ist.

Berichtige mich bitte, wenn ich beim Firefox falsch liege.
Vielen Dank!
 
content:"." in Verbindung mit dem :after-Pseudoelement fügt nach der Box einen automatisch generierten Inhalt ein, in diesem Fall einen Punkt. Um sicherzustellen, dass dieser keinen Raum im Textfluss einnimmt, haben wir die Schriftgröße auf null herabgesetzt.

Zum IE: er hat die schlechte Angewohnheit, die Whitespaces (Zeilenumbrüche, Tab-Einrückungen) im HTML-Code vor und hinter dem <img>-Tag mit einer Lücke zum nachfolgenden Element zu quittieren. Diese Fehlinterpretation lässt sich abstellen, indem das Grafikelement "Block-Level-Charakteristika" erhält.

Bei mir zeigt der IE 6 + 7 aber keinen horizontalen Scrollbalken an.

Das Problem liesse sich alternativ auch beheben, indem du die Grafik als Hintergrundbild einsetzt. ;)
 
Super Erklärung, das hab ich verstanden.

Du hast sicherlich eine hohe Auflösung, wie ich auch. Da ich jedoch auch Usern mit 1024*768 in den Genuss einer schönen Seite kommen lassen möchte, muss ich es natürlich auch mit dieser Auflösung testen. Und genau da passiert der Fehler. Bei höheren Auflösungen ist das bei mir auch nicht vorgekommen.

Liegt es vieleicht an irgendeiner Breitenangabe?
Es ist bisher nur beim Impressum aufgetreten.
 
Bei mir erscheint der horizontale Scrollbalken erst dann, wenn der Anzeigebereich des Browserfensters die 802px des Seitenlayouts unterschreitet.
 
Ich möchte dir auch nicht unterstellen, dass du lügst oder mir Kopfzerbrechen bereiten möchtest.

Wer weiß woran es liegt. Aber ich zeige es dir hier mit dem Screenshot:

Hier fürs Bild klicken

Vieleicht siehst du ja etwas, was ich nicht sehe :)
 
Was auch immer du gemacht hast, es ist weg...

komisch. Bei mir wird nun auch kein horizontaler Balken mehr angezeigt.
Wer weiß was das war. Eine Laune von Bill wahrscheinlich. Ärger über seinen Ruhestand.

Nun gut. Vorbei ist vorbei.
Vielen dank Maik, du hast mir serh geholfen und evtl. bis zum nächsten Mal :)
 
Ich würde so spontan behaupten, ohne darauf zu bestehen dass es stimmt, dass die gesamt Breite deiner Site den "ViewPort" bei dir übersteigt...
Sprich, dass Layout ist schlicht zu breit...
Dem Screenshot nach zu urteilen, nehm ich aber an, dass du ne höhere Auflösung als 1024x768 verwendest oder?
Wenns doch nur die ist, dann setz die Breite mal nen paar px kleiner... So 5e müssten schon reichen...

Ich kämpf auch öfters damit rum ^^ Is also nix unübliches xD
Halt dich aber nich zu sehr an der Formatierung fürn IE auf...
Vorraus gesetzt, es is kein Auftrags Projekt, woran du da arbeitest...

Ich persönlich optimiere meine Site primär nur noch fürn FireFox...
Kanns mir ja auch leisten, weil ich meine Site privat betreibe... Wenn es was größeres sein soll, dann sollte man sich schon die Mühe für alle Browser machen ;)
 
Status
Nicht offen für weitere Antworten.
Zurück