✔ Probleme bei der Darstellung mit dem IE7

J

julchen

Erfahrenes Mitglied
Hallo,
ich selber hab den IE7 nicht im Einsatz. Der Kunde von mir berichtet aber, dass auf der Seite der Footer teilweise Bilder und Text verdeckt. Das tritt aber nur unter dem IE7 auf.

Könnt ihr mal testen und mir vielleicht sagen, auf welchen Seiten das Problem besteht und wie ich es beheben kann.

http://www.praxis-huntscha.de

Gruss
Julchen
 
Hi,
julchen hat gesagt.:
Könnt ihr mal testen und mir vielleicht sagen, auf welchen Seiten das Problem besteht
Zum Vergrößern anklicken....

... gehören auf jeden Fall zum engeren Kreis.

Was den IE7 in diesen Seiten dazu bewegt, den "Sticky-Footer" (siehe auch mein "Webmaster FAQ"-Artikel CSS Wie lässt sich der Footer am unteren Fensterrand ausrichten?) nicht nach unten rücken zu lassen, und wie dem zu begegnen ist, kann ich dir derzeit nicht sagen, denn beim Überfliegen des CSS-Codes ist mir nichts sonderliches aufgefallen.

julchen hat gesagt.:
ich selber hab den IE7 nicht im Einsatz.
Zum Vergrößern anklicken....
Ich auch nicht, was meine Ausflüge ins Netz angeht.

Dennoch bin ich im Besitz der gängigen Browser(versionen), um meine Arbeit hinsichtlich der Browserkompatibilität überprüfen zu können, und ggfs. den Code zu korrigieren, bevor er dem Kunden übergeben wird.

Und IE7 zählt nun wahrlich nicht zu den Exoten unter den Webbrowsern, oder zu einer Browsergeneration aus längst vergangenen Tagen, die es nicht (mehr) zu berücksichtigen gilt.

Manch einer schwört auf:

Ein anderer gönnt sich auf seinem System mehrere virtuelle Maschinen für die einzelnen Mitglieder der IE-Familie ;-)

mfg Maik
 
Hi,

versuch mal den Footer relative zu positionieren:
Code: 
#footer {
position:relative;
bottom: 0; /* wichtig */
width:950px;
text-align:center;
line-height:60px;
}

Im Gegenzug entfernst du das Spacer-P-Element bzw. passt dessen Höhe an.
Code: 
<!-- <p style="line-height:85px;">&nbsp;</p> -->
<div id="footer">
  <p><img src="../images/footer.jpg" alt="footer" /></p>
</div>

Ciao
Quaese
 
Hi,
Quaese hat gesagt.:
Hi,

versuch mal den Footer relative zu positionieren:
Code: 
#footer {
position:relative;
bottom: 0; /* wichtig */
width:950px;
text-align:center;
line-height:60px;
}

Im Gegenzug entfernst du das Spacer-P-Element bzw. passt dessen Höhe an.
Code: 
<!-- <p style="line-height:85px;">&nbsp;</p> -->
<div id="footer">
  <p><img src="../images/footer.jpg" alt="footer" /></p>
</div>

Ciao
Quaese
Zum Vergrößern anklicken....

Das geht, nur ist damit der angedachte "Sticky-Footer" dann flöten ;)

Wie lässt sich der Footer am unteren Fensterrand ausrichten? - Methode 1 hab ich eben mit der Problemseite "behandlungsschwerpunkte.html" erfolgreich im IE7 getestet :)

  • Änderung im HTML-Code:
HTML: 
<body>
    <div id="box">
        ...
    </div>
    <div id="footer">
        <!-- #footer wird im Anschluß von #box notiert -->
    </div>
</body>
  • Änderung / Ergänzung im CSS-Code:
CSS: 
html, body{
 	height:100%; /* anstelle von height:auto */
	...
}

#box{
	...
	margin:0 auto -60px; /* anstelle von margin:0 auto */
	...
}

#footer {
position:relative; /* anstelle von position:absolute */
clear:both; /* neu hinzugekommene Regel */
/*bottom: 0;*/ /* entfällt */
...
}

Wie lässt sich der Footer am unteren Fensterrand ausrichten? - Methode 2 führt hier ebenso zum Erfolg.

CSS: 
#box{
	...
	margin:0 auto; /* bleibt bestehen */
	...
}

#footer {
position:relative; /* anstelle von position:absolute */
clear:both; /* neu hinzugekommene Regel */
margin-top:-60px; /* neu hinzugekommene Regel */
/*bottom: 0;*/ /* entfällt */
...
}

Und dein inhaltsleerer Textabsatz:
HTML: 
<p style="line-height:85px;">&nbsp;</p>
der nur als Abstandshalter agiert, damit der Seiteninhalt nicht den Footerbereich "unterwandert", wird bei beiden "Sticky-Footer"-Techniken durch diese CSS-Regel ersetzt:
CSS: 
#box_content{
padding:0 0 85px 0; /* Innenabstand oben - rechts - unten - links */
margin:0px;
}

mfg Maik
 
Hi,
danke euch. Besonderer Dank an Maik!!

Könnt ihr es mal bitte unter dem IE7 testen. Ich hab die Kompatibilitäts Tester noch nicht installiert. Ich hab noch keinen Hinweis gesehen, dass das Prog auch unter Win 7 64 Bit läuft. Ich müsste es mal auf einem anderen Rechner installieren.

Ich habe die Methode 2 gewählt!


Nochmals vielen Dank!!

Gruss
Julchen
 
Sieht gut aus :)

Hier der Screenshot von "behandlungsschwerpunkte.html" beim Öffnen des Tooltips für "Naturheilkundliche Behandlung von Tumorerkrankungen":

ie7-1.jpg ie7-2.jpg

Nur hast du vergessen, die Änderung im HTML-Code vorzunehmen, wonach sich #footer nicht mehr innerhalb von #box befindet. ;)

Maik hat gesagt.:
  • Änderung im HTML-Code:
HTML: 
<body>
    <div id="box">
        ...
    </div>
    <div id="footer">
        <!-- #footer wird im Anschluß von #box notiert -->
    </div>
</body>
Zum Vergrößern anklicken....

Denn so sitzt er derzeit mit geringem Seiteninhalt bei maximiertem Browserfenster nicht unmittelbar am unteren Fensterrand, sondern um die margin-top:-60px-Regel davon entfernt.

Hier der Schnappschuß der Seite "vita.html":

footer-position.jpg

mfg Maik
 
Und was hindert dich, ihn in die Fenstermitte zu rücken? Beim ersten DIV-Block #box ist es dir doch auch gelungen.

Leider gewinne ich hier den Eindruck, dass du meine gezeigten CSS-Schnipsel in dein Stylesheet kopiert, aber meinen Artikel überhaupt nicht gelesen hast, denn ansonsten wärst du mit meinen beiden Grafikanhängen im Bilde gewesen, dass es sich hier ebenfalls um ein horizontal zentriertes Layout mit fester Breite handelt.

Sollte dir aber die Einleitung entgangen sein, weil ich dich mit meinen Verweisen zu zwei Ankern innerhalb meines Beitrags geführt habe, hätte dir in den Stylesheets der drei Beispiele anhand der margin-Regeln für #wrapper und #footer auffallen müssen, dass diese drei Layouts im Viewport nicht linksbündig sitzen:

http://www.tutorials.de/forum/webmaster-faq/353420-css-wie-laesst-sich-der-footer-am-unteren-fensterrand-ausrichten.html#methode2 hat gesagt.:
  • margin-bottom für #wrapper
CSS: 
#wrapper {
              position:relative;
              width:900px;
              min-height:100%;
              height:auto !important;
              height:100%;
              margin:0 auto -80px;
}

#footer {
              position:relative;
              width:900px;
              height:80px;
              margin:0 auto;
}
  • margin-top für #footer
CSS: 
#wrapper {
              position:relative;
              width:900px;
              min-height:100%;
              height:auto !important;
              height:100%;
              margin:0 auto;
}
#footer {
              position:relative;
              width:900px;
              height:80px;
              margin:-80px auto 0;
}
  • position:absolute für #footer
CSS: 
#wrapper {
              position:relative;
              width:900px;
              min-height:100%;
              height:auto !important;
              height:100%;
              margin:0 auto;
}
 
#footer {
              position:absolute;
              bottom:0;
              left:0;
              width:100%;
              height:80px;
              margin:-80px 0 auto;
}
Zum Vergrößern anklicken....

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück