✔ Abschließende footer Grafik am Ende funktioniert nicht

[cocoon]

Für ein Blog-Theme soll unterhalb des Content-DIVs eine abschließende footer Grafik gesetzt werden, die dem Content-Bereich abgerundete Ecken gibt. Da der Content automatisch generiert wird, soll die footer Grafik natürlich automatisch je nach Content der davor kommt weiter runterrutschen.

Ich habe es auf mehrere verschiedene Wege versucht, u.a. nach dem im Webmaster-FAQ vorgeschlagenen (http://www.tutorials.de/forum/webma...ne-box-am-unteren-rand-der-elternbox-aus.html). Leider funktioniert alles nicht; mal zeigt es IE falsch an, mal der FF. I.d.R. sieht der Fehler aus wie auf dem Bild angezeigt.

Mein Code:
HTML:

<div id="mainContent">
   Here comes the content...<br />
 
   <div id="mainContent_footer">
      <img src="img/box_foot.gif" border="0" alt="" />
   </div>
</div>

CSS:

#mainContent {
clear: both;
background: white url(img/tr_white.gif) no-repeat top right;
height: auto !important;
min-height: 300px;
padding-left: 20px;
padding-top: 20px;
color: black;
}

#mainContent_footer{
position:absolute;
left:0;
bottom:0;
}

Wenn ich den main content DIV auf position: relative setze (wie in der FAQ beschrieben), verschiebt der IE die footer grafik noch weiter nach unten und nach rechts. Wenn ich die Grafik im footer div nochmal in ein paragraph (p-Element) setze, macht der IE es gut, dafür tritt dann im FF der Fehler wie in der angehangenen Grafik gezeigt.

 

[Maik]

Hi,

kann man sich das irgendwo "live" mit den verwendeten Grafiken anschauen?

mfg Maik

 

[Maik]

Da du deinen Code nachgereicht hast, kannst du es mal hiermit versuchen:

#mainContent {
position: relative; 
clear: both;
background: white url(img/tr_white.gif) no-repeat top right;
min-height: 300px;
height: auto !important;
height: 300px;
padding-left: 20px;
padding-top: 20px;
color: black;
}

#mainContent_footer{
position:absolute;
left:0;
bottom:0;
}

#mainContent_footer img {
display: block;
}

Ich vermute nämlich, dass in deinem HTML-Code die "Whitespaces" (Tab-Einrückungen, Zeilenumbrüche) vor und nach dem <img>-Element im Footer-Bereich interpretiert werden, was im Textfluß einen Abstand nach unten erzeugt, in dem der Hintergrund von #mainContent zum Vorschein kommt.

Falls dies nicht weiterhilft, wäre ein Link zur Seite ganz hilfreich

Die relative Positionierung von #mainContent ist von nöten, damit sich die absoluten Positionsangaben von #mainContent_footer nicht auf den Rand des Browserfensters beziehen.

mfg Maik

 

[cocoon]

Zumindest im IETester sieht es mit display:block jetzt alles sauber aus. Wenngleich ich mich meine erinnern zu können, dass es auf einem anderen Rechner im dort installierten IE6 immer noch falsch dargestellt wurde. Danke trotzdem erstmal, werde wohl noch ein bißchen auf anderen Rechnern testen müssen.