# Probleme mit Footer-Container unter IE



## julchen (11. Dezember 2008)

Hallo, 
ich hab das Problem, dass mein Layout unter dem ie nicht richtig dargestellt wird. Der unterste Footer Bereich mit der Adresse rutscht mir in den Textbereich mit rein und wird nicht immer am Ende positioniert. Woran kann das liegen oder was muss ich machen. 

http://www.haus-brigida.de/

Danke Julchen


----------



## Maik (11. Dezember 2008)

Hi,

ersetz den height-Wert *auto* durch *100%*.

mfg Maik


----------



## julchen (11. Dezember 2008)

Hallo,
du meinst im Container #box den Wert für ie?

Gruss
Julchen


----------



## Maik (11. Dezember 2008)

Ist dort für den IE height:auto deklariert?

mfg Maik


----------



## julchen (11. Dezember 2008)

Hallo,

#box{
	width:950px;
	margin:15px auto;
	font-size:75%;
	text-align:left;
  	position:relative;
	min-height:100%;
	height:auto !important;/* moderne Browser */
	height:100%; /* IE */
	background: #fff;
	background-image:url(../images/bg_border.gif);
	background-repeat:no-repeat;
}


----------



## Maik (11. Dezember 2008)

Du brauchst mir diesen Regelblock nicht zu zeigen, denn die Frage war an dich gerichtet, ob dort height:auto für den IE deklariert ist.

Ist es nicht, also schau dir mal den Beginn des Stylesheets näher an.

Übrigens ist das Problem bei mir im IE (6 + 7) zwischenzeitlich auf wundersame Weise verschwunden :suspekt:

mfg Maik


----------



## julchen (11. Dezember 2008)

Hallo,
sorry, ich hatte verwechselt und meinte du wolltest 100% durch auto ersetzen. Ich war an der falschen Stelle.

Danke.

Julchen

hm,
doch nicht. Jetzt gehts erst recht nicht

Gruss
julchen

>Hallo,
irgendwie ist das Problem nur, wenn er im Content noch Dinge nachladen muss und der Footer ist schon vorher da. Jetzt weiss ich allerdings nicht mehr was ich wo ändern muss mit 100% oder auto.

Was meinst du?

Gruss
Julchen


----------



## Maik (11. Dezember 2008)

Wie gesagt, das Problem existiert bei mir im IE kurioserweise nicht mehr:





(links: IE6, rechts: IE7 / WinXP)

mfg Maik


----------



## julchen (11. Dezember 2008)

ich hab das Problem noch. ich hatte eben den style nochmals geändert. Kannst du nochmals bitte auf den aktuellen style-sheet schauen und mir kurz sagen was ich ändern muss. oder den browser nochmals refreshen. bei mir ist es immer noch. muss ich eventuell im style für body den kommentar für den ie deklarieren anstatt wichtig oder noch eine zeile einfügen mit height 100% und auskommentiert für den ie?


----------



## Maik (11. Dezember 2008)

Bei mir wird noch immer alles wie gewünscht angezeigt, und die entsprechenden CSS-Regeln sind in dieser Form auch richtig geschrieben - deshalb hatte ich eingangs auch nur den height-Wert für den Viewport und Dokumentkörper als mögliche Fehlerquelle ausgemacht.

Ach, und vernachlässige die Shift-Taste beim Verfassen deiner Beiträge nicht - vielen Dank 

mfg Maik


----------



## julchen (11. Dezember 2008)

Hallo,
ja sorry, ich war gerade was am essen und hatte nur eine Hand frei 

Komisch jetzt gehts bei mir auch, aber es war teilweise auf den Unterseiten so dass es noch immer so war. 

Trotzdem Danke
Julchen


----------



## Maik (11. Dezember 2008)

Ansonsten solltest du mal  die *.clearfix*-Klasse in der Box *#box_right*, sowie *.content_pic_left* aufrufen - das erspart nämlich das immer wiederkehrende inhaltsleere DIV*.clear* zum "Float-Clearing", und ist auch der Sinn der Technik, die in dieser CSS-Klasse steckt.


```
<div id="box_right" class="clearfix"> ... </div>
```


```
<div class="content_pic_left clearfix"> ... </div>
```


mfg Maik


----------



## julchen (11. Dezember 2008)

Hallo,
o.k. ich versuch es. Was meinst du mit der 2. Klasse <div class="content_pic_left clearfix"> Soll ich die Angaben von der Klasse clearfix in die Klasse content_pic_left reinkopieren und eine neue Klasse erstellen oder kann ich das so in die Kommata schreiben und er nimmt sich dann jeweils beide Klassen? So kenn ich das nämlich noch gar nicht.

Gruss
Julchen


----------



## Maik (11. Dezember 2008)

Hi,

im class-Attribut lassen sich, wie von mir zuletzt demonstriert, ohne weiteres mehrere CSS-Klassen mit einem Leerzeichen voneinander getrennt aufrufen.

Na, und die beiden genannten Klassen existieren ja schon in deinem Stylesheet - ergo muß dort auch nichts geändert / umgeschrieben werden.

mfg Maik


----------



## julchen (29. Januar 2009)

*Probleme mit Footer Positionierung unter ie*

Hallo,
ich hab das Problem, dass unter dem ie der Footer sich nicht ans Ende der Seite positioniert sondern je nach Fenstergröße wird er dann z. B. mitten in der Seite im Text positioniert. Das ganze ist aber nur im ie so, im ff gehts. Wenn ich also z. B. das Browserfenster minimiere und dann die Seite aufrufe tritt der Effekt auf oder eventuell auch bei kleinen Bildschirmen.

Woran kann das liegen, hat jemand eine Idee?

Hier das Beispiel, auf den anderen Webseiten dieses Projektes ist das gleiche Problem.

Beispiel

Gruss
Julchen


----------



## mattit-jah (29. Januar 2009)

Hi,

hört sich für mich nach einem float und clear Problem an. Leider hab ich kein IE bei mir sonst könnte ich es genauer nachvollziehen.

Grüße

EDIT:

Ach halt, du setzt den Footer immer ans Ende des Bildschirms, auch wenn der Text kleiner ist? Macht ie das immer, oder nur ab und zu?


----------



## Dr Dau (29. Januar 2009)

Hallo!

Kann ich nicht wirklich bestätigen (IE7).

Der Footer war zwar beim ersten Seitenaufruf in Höhen der "Passfotos", jedoch nur solange bis ich eine Unterseite aufgerufen habe.

Beim anschliessenden minimieren, maximieren, ändern der Fenstergrösse, schliessen des Fensters und neu aufrufen der Seite war das Problem nichtmehr vorhanden.

Daher denke ich mal eher dass es ein Übertragungsproblem ist/war und es nicht am CSS liegt/lag.
Möglicherweise hast Du auchnoch "alte" Seiteninhalte im Browsercache, den solltest Du also evtl. mal leeren.

Gruss Dr Dau


----------



## julchen (29. Januar 2009)

mattit-jah hat gesagt.:


> Hi,
> 
> hört sich für mich nach einem float und clear Problem an. Leider hab ich kein IE bei mir sonst könnte ich es genauer nachvollziehen.
> 
> ...




Hallo,
also es ist im 7er ie. Wenn ich das Fenster wie gesagt, verkleiner und dann auf der Seite verschiedene Seiten öffne und direkt bevor die Seite zu Ende geladen hat, nach unten Scrolle. Dann tritt der Effekt auf. Wenn die Seiten mal im Cache sind nicht mehr. Also immer nur dann wenn eine neue Seite ohne Cache geladen wird, das Browserfenster kleiner ist wie der dargestellt Inhalt und wenn man direkt ans Seitenende scrollt. Dann verschiebt sich der Footer nach oben.

Gruss
holli


----------



## kalterjava (29. Januar 2009)

Hallo,

ich glaub nicht, dass es ein Cacheproblem ist. Versuch zuerst mal die Seite fehlerfrei zu validieren. Vielleicht liegt da irgendwo der Fehler, der das Anzeigeproblem beim IE7 hervorruft:

http://www.validome.org/validate

gibt nämlich das an:



> Das Dokument ist nicht valides XHTML 1.0 Strict
> 
> Schwerer Fehler
> Im Dokument befindet sich in Zeile 5 und Spalte 144 ein ungültiges Zeichen.
> Dieses Zeichen ist in der verwendeten Zeichenkodierung (utf-8) nicht erlaubt.



Grüße vom kaltenjava


----------



## julchen (29. Januar 2009)

Hallo,
der Validator meckert irgendwas an meiner Zeichenkodierung an. ich habe aber bisher immer die gleiche verwendet und nie kam ein Fehler.

Welche Kodierung sollte ich denn nehmen, bzw. was muss ich dann ändern?

Er schlägt mir diese vor:

<?xml version="1.0" encoding="iso-8859-1"?>

Gruss
Holli


----------



## Dr Dau (29. Januar 2009)

Du verwendest
	
	
	



```
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
```
Daher ist der Vorschlag vom Validator korrekt.

[edit]
Da in ISO-8859-1 das €-Symbol aber nicht enthalten ist, solltest Du sicherheitshalber ISO-8859-15 verwenden.

Ausserdem solltest Du Umlaute und das "ß" (ggf. auch das €-Symbol) als "benannte Zeichen" angeben.
Für &euro; funktioniert es genauso wie für &copy;.
[/edit]


----------



## Maik (29. Januar 2009)

Hi,

ich war mal so frei deinen "neuen" Thread mit dem Thread "Probleme mit Footer Container unter ie" zusammenzutackern, da es sich a) um dieselbe Seite und b) das gleiche Problem handelt, und möchte dich darum bitten, zukünftig solche Doppelpostings zu vermeiden, da sie gemäß der Netiquette Nr.12 unerwünscht sind.

mfg Maik


----------



## Taft (29. Januar 2009)

Ich bin zwar nicht der CSS Profi, aber ich glaube das der IE so seine probleme mit dem Code "bottom" hat, den du auf deine Footer anwendest.


----------



## Maik (29. Januar 2009)

Taft hat gesagt.:


> Ich bin zwar nicht der CSS Profi, aber ich glaube das der IE so seine probleme mit dem Code "bottom" hat, den du auf deine Footer anwendest.


Das seh ich nicht so, wenn ich hier mal mein CSS-Tutorial CSS-Layout mit 100%-Höhe als Beispiel nenne, in dem ich den Footer auf dieselbe Weise positioniert habe, und vom IE tadellos interpretiert wird.

Ich tippe im vorliegenden Fall eher auf das hasLayout, oder ein falsches Clearing der Floats.

mfg Maik


----------



## Maik (29. Januar 2009)

Wenn du die *clearfix*-Klasse zum Float-Clearing anwendest, kannst du auch in den entsprechenden Boxen am unteren Ende das inhaltsleere  "Clearing"-DIV aus dem Markup entfernen, denn dafür ist die besagte Klasse gedacht - siehe hierzu den Artikel How To Clear Floats Without Structural Markup.

Darauf hatte ich dich in diesem Thema aber schon mal hingewiesen.

mfg Maik


----------



## julchen (29. Januar 2009)

Hallo Maik,
sorry, mit dem Doppelposting. Ich dachte eigentlich das Problem wäre damals gelöst gewesen, tritt aber wieder auf. 

Das mit deinem letzten Thread hab ich jetzt nicht verstanden. Was muss ich wo entfernen mit Clear im Code und was dazu schreiben?

LG
Julchen


----------



## Maik (29. Januar 2009)

Die Frage beantwortet doch mein empfohlener Artikel.


```
<div id="box_right" class="clearfix">
			<h1>St. Brigida.<span class="h1_title">Einrichtungsleitung</span></h1>
			<div class="content_pic_titel"><img src="http://www.tutorials.de/forum/images/seniorenzentrum/pic_einrichtungsleitung_lar.png" alt="" /></div>

       	  <p>Die Ausgestaltung von Leitung ist kooperativer, moderierender, f&ouml;rdernder und   fordernder Dienst an die Mitarbeiter.</p>
		  <div class="clear">&nbsp;</div>
              <h3>Bei uns steht der Mensch im Mittelpunkt.</h3>
		  	  <p class="spacer">&nbsp;</p>
              <p>Diesen Grundsatz machen wir und unsere Mitarbeiter uns zur t&auml;glichen Aufgabe.</p>
              <p>&nbsp;</p>

              <div style="float:left; width:130px; margin-right:5px; text-align:center;"><img src="http://www.tutorials.de/forum/images/seniorenzentrum/pic_leisch.png" alt="Gesch&auml;ftsf&uuml;hrerin: Martina Leisch" style="padding-left:15px;" /><br />
			    <span class="text_highlight">Geschäftsführerin:</span><br />
			  Martina Leisch			  </div>
<div style="float:left; width:130px; margin-left:10px; margin-right:5px; text-align:center;"><img src="http://www.tutorials.de/forum/images/seniorenzentrum/pic_polmans.png" alt="Verwaltungsleiter: Dieter Polmans" style="padding-left:15px;" /><br />
			    <span class="text_highlight">Verwaltungsleiter:</span><br />
			  Dieter Polmans		  </div>
			  <div style="float:left; width:130px; margin-left:10px; text-align:center;"><img src="http://www.tutorials.de/forum/images/seniorenzentrum/pic_thiel.png" alt="Pflegedienstleiterin: Claudia Thiel" style="padding-left:15px;" /><br />

			    <span class="text_highlight">Pflegedienstleiterin:</span><br />
		  Claudia Thiel</div>
		  <div class="clear">&nbsp;</div>
			<p class="arrow_top"><a href="#top"><img src="http://www.tutorials.de/forum/images/arrow_top.jpg" alt="arrow_top" width="10" height="14" style="float:left;" /></a><a href="#top">Seitenanfang</a></p>
		</div>
    	<!-- InstanceEndEditable -->
        <div class="clear">&nbsp;</div> <!-- kann entfernt werden -->
</div>
```


mfg Maik


----------



## julchen (29. Januar 2009)

Hallo,
aha, jetzt versteh ich. Ein doppeltes Clear kann zu Problemen im ie führen. Also muss ich überall das doppelte Clear entfernen.

Danke dir, ich hoffe es klappt jetzt.

Julchen


----------



## Maik (29. Januar 2009)

Ich hab gerade eben in einer ruhigen Minute dein Stylesheet nochmal durchgeschaut, sowie im IE (6 + 7) getestet, und kann dir jetzt mit Sicherheit sagen, dass für *#footer* die clear:both-Deklaration fehlt.

Mit meinem Tipp bzgl. des doppelten "Clearings" wollte ich nicht zum Ausdruck bringen, dass dies zu Problemen im IE führt, sondern eines davon im Code entfernt werden kann, denn da du  die Easyclearing-Technik (.clearfix:after) nutzt, ersetzen diese CSS-Regeln in deinem HTML-Code am unteren Ende der Elternbox das  besagte DIV*.clear* zum Aufheben der Floatumgebung.

mfg Maik


----------



## julchen (8. Februar 2009)

Hallo,
ich krige das Problem einfach nicht weg. Jetzt hab ich von einem anderen Rechner gesehen, dass der Footer sich immer noch nach oben verschiebt im IE. Bei der Seite Seelsorge.

http://www.haus-brigida.de/seelsorge/seelsorge.html

Gruss
Julchen


----------



## Maik (8. Februar 2009)

julchen hat gesagt.:


> ich krige das Problem einfach nicht weg.


Wie auch, wenn du meine zuletzt gewonnenen Erkenntnisse nicht in die Tat umsetzt? 

mfg Maik

//edit: Ich hab  die genannte Seite (mit absoluten Grafik-Pfaden, damit sie in der Seite erscheinen) in meinen existierenden lokalen Test-Ordner abgelegt, der im Stylesheet die erforderliche Regelerweiterung für den Footer enthält, im IE7 aufgerufen, et volià:


----------



## julchen (8. Februar 2009)

Hallo,
jetzt hab ich clear:both für den #footer eingerichtet, aber das Problem besteht immer noch. Hab ich dich jetzt schon wieder falsch verstanden? Also, der Footer ist immer verchoben, wenn ich nach untern scrolle bevor die Seite komplett geladen ist. Ansonsten gibts keine Probleme.

Gruss
Julchen


----------



## Maik (8. Februar 2009)

Leer mal vor dem nächsten Seitenaufruf den Browser-Cache 

mfg Maik


----------



## DJTrancelight (8. Februar 2009)

Also ich hab mir mal deine Seite auch angeschaut. Das kann auch evtl. ein Serverproblem sein, wenn du mit dynamischen Inhalten arbeitest, denn beim ersten Aufruf sitzt der Footer korrekt am Ende und bei irgendeinem Seitenwechsel oder aktualisieren des Caches, platziert er sich in die Mitte des Contents.

Noch etwas. Ich glaub du hast das title-Tag zu sehr vollgestopft. Vielleicht nimmt dir das der IE übel. Schreib mal da "Haus Brigida - Seelsorge" rein und mehr nicht. Alles andere kommt in meta-Tags.

Evtl. bestimmte Meta-Tags kürzen oder komplett streichen.
Bei Doctype-Anweisung die URL-Adresse  zum W3C entfernen. Hat bei mir auch mal ein Problem gelöst.

VG


----------

