Adda: unerwünschter Text unter Footer

Hallo zusammen,

habe da ein kleines Problem mit meinem CSS. Unter dem Footer (zwischen Footer und "Browserende" ist beim Scrollen Text erkennbar. Siehe Screenshot (habe die Kontaktdaten unkenntlich gemacht, bitte nicht wundern).
Es handelt sich im Wesentlichen um dieses Beispiel, welches ich ein wenig modifiziert habe.
Hier ein (hoffentlich DER) Schnipsel:
#footer_container {
    position:fixed;
    bottom:0; left:0; right:0;
    text-align:center;
    margin:0;
    height:3em;
    z-index:3;
}
#footer {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background:#33CC33;
    z-index:3;
}

Habe zur Zeit nur den IE6 zur Verfügung, ob das Problem in anderen Browsern auftritt kann ich erst heute abend (=zu Hause) feststellen. Selbst wenn das nicht der Fall ist, würde ich das Problem gerne abstellen...

Ich hoffe es hat jemand einen Tipp für mich.

Schönen Gruß,
Adda

P.S.: ich gehe davon aus, dass es dieses Problem schon öfter gab - dementsprechend wäre mir auch mir mit geeigneten Suchbegriffen geholfen. Mit meinen Laienworten konnte die Suche nicht viel anfangen... :(

  1. Hallo,

    Unter dem Footer (zwischen Footer und "Browserende" ist beim Scrollen Text erkennbar.

    Da ist der Footer nicht ganz unten?

    Also womöglich etwas margin oder padding, das läßt sich ja per CSS ändern,
    ob nun bei einem Div oder beim body etc..

    Oder sonst zuviel Abstand im (transparenten?) Container. Oder der IE kommt mit
    irgendeiner Höhe "100%" nicht ganz klar. Vielleicht sind diese Beispiele zu
    position:fixed für IE noch interessant. Notfalls kannst du auch per CSS-Weiche
    wie * html für die IE 5 bis 6 punktuell nachbessern.

    Zu deinem geposteten Code paßt das vmtl. für den IE6:
    * html #footer_container {bottom:-1px;}

    Grüsse aus Düsseldorf
    Cyx23

    1. Guten Abend Cyx23,

      Zu deinem geposteten Code paßt das vmtl. für den IE6:
      * html #footer_container {bottom:-1px;}

      Genau das wars! Herzlichen Dank!

      Schönen Abend noch,
      Adda

  2. Ich hoffe es hat jemand einen Tipp für mich.

    Also ich weiß nicht, mir kommt die Positionierung der Elemente etwas komisch vor. Mag sein dass ich mich irre und meine Vorstellung falsch ist, aber meines Erachtens nach kann ein Element nur oben ODER unten, respektive links ODER rechts sein. Ein bündiges abschließen ergibt sich dann automatisch durch die Abmessungen von 100%.
    Heißt konkret, die Angabe von bottom: 0px; top: 0px; und das Fehlen einer Höhenangabe für #footer würde ich für die Ursache halten.
    Ich würde für beides nur bottom: 0px; notieren und eine feste Höhe der Elemente vergeben.

    Für bottom: -1px; anzugeben, halte ich für eine suboptimale Lösung, immerhin verschiebt es bei den Browsern wo es vorher funktioniert hat ja jetzt den Footer um 1px aus dem Bild.
    Mag bei dir nicht schlimm sein, aber wenn beispielsweise der Footer mit einem Grafikelement aus dem Content abschließen soll, muss die Positionierung stimmen. Da ich sowas auch schonmal hinbekommen hab, muss es eine Lösung geben, leider hab ich die Seite auf die Schnelle nicht da.

    1. Hallo RFZ (die mag ich auch am Liebsten ;) ),

      Für bottom: -1px; anzugeben, halte ich für eine suboptimale Lösung, immerhin verschiebt es bei den Browsern wo es vorher funktioniert hat ja jetzt den Footer um 1px aus dem Bild.

      Das macht er nur beim IE - für die anderen Browser (FF&Opera getestet) bleibt alles gleich.

      Mag bei dir nicht schlimm sein, [...]

      stimmt zum Glück ;)

      Ich stehe noch ganz am Anfang, sowohl mit HTML als auch mit CSS, und bin daher für "einfache" Tipps (die ich verstehen und umsetzen kann) sehr dankbar. Ich hoffe, du kannst das verstehen (auch wenn die einfach Lösung vielleicht nicht die eleganteste ist).

      Trotzdem, danke dir!
      Adda

    2. Good morning!

      Also ich weiß nicht, mir kommt die Positionierung der Elemente etwas komisch vor. Mag sein dass ich mich irre und meine Vorstellung falsch ist, aber meines Erachtens nach kann ein Element nur oben ODER unten, respektive links ODER rechts sein. Ein bündiges abschließen ergibt sich dann automatisch durch die Abmessungen von 100%.

      Nein, das ist im Standard ausdrücklich so vorgesehen: Wenn man zwei gegenüberliegende Positionen angibt, werden beide berücksichtigt, und die Breite bzw. Höhe ergibt sich daraus.

      Heißt konkret, die Angabe von bottom: 0px; top: 0px; und das Fehlen einer Höhenangabe für #footer würde ich für die Ursache halten.

      Damit allerdings kannst Du trotzdem recht haben, denn ein gewisser, nicht ganz so standardkonformer Browser sieht es auch so, wie Du oben geschrieben hast. ;-)

      Für bottom: -1px; anzugeben, halte ich für eine suboptimale Lösung, immerhin verschiebt es bei den Browsern wo es vorher funktioniert hat ja jetzt den Footer um 1px aus dem Bild.

      Der Einwand ist berechtigt, aber Cyx23 hat ihn schon bedacht und deswegen den Star-HTML-Hack angewandt, dank dessen standardkonforme Browser die Angabe ignorieren.

      @Adda: IMHO kannst Du diese Lösung bedenkenlos verwenden. Nebenwirkungen auf andere Browser werden nicht auftreten.

      Viele Grüße vom Længlich