lars: footer für IE

Hi, ich möchte einen Footer wie in:

http://aktuell.de.selfhtml.org/tippstricks/css/footer/ bauen. Für Firefox etc. ist das alles kein Problem, dank position:fixed;

Aber beim Internetexplorer habe ich ein Problem: es fehlen die Scrollbalken.

Die Seite möchte ich in eine Vorhandene cms-Umgebung (Typo3) unter folgenden Bedingungen integrieren:
Der von mir erstellte Inhalt wird in eine Tabellenzelle ausgegeben. D.h. ich kann nur innerhalb von <td> ... </td> Inhalte erzeugen alles was davor und danach kommt wird vom System vorgegeben.

Ist es möglich, dass ich einen Footer (für den IE) erstellen kann, der unten am Fenster "klebt" auch wenn die Seite größer als das Fenster ist.  ... dann soll ein Scrollbalken erscheinen aber der Footer soll beim Scrollen fest am unteren Fensterrand bleiben.

  1. Hi lars,

    Aber beim Internetexplorer habe ich ein Problem: es fehlen die Scrollbalken.

    Dieses Fehlverhalten ist mir auch schon mal aufgefallen - es tritt dann auf, wenn die Seite stark in die Breite geht, das führt dann bei mehreren Browsern zu Problemen.
    Ich habe schon ausprobiert mit overflow das Problem zu lösen - prinzipiell müsste das doch eigentlich gehen, wenn man alle Elemente sich ausdehnen lässt und nur body bzw. html erlaubt über Scrollbalken zu verfügen. In allen Browsern außer dem IE hab ich es dann auch ans Laufen gebracht, aber eben nicht im IE - jedenfalls habe ich es dann aufgegeben und auf dieser einen Seite kurzerhand den Footer weggelassen.

    Ich müsste mir das noch mal durch den Kopf gehen lassen und nach Lösungsmöglichkeiten suchen - aber da brauche ich mehr Zeit zu.

    Die Seite möchte ich in eine Vorhandene cms-Umgebung (Typo3) unter folgenden Bedingungen integrieren:
    Der von mir erstellte Inhalt wird in eine Tabellenzelle ausgegeben. D.h. ich kann nur innerhalb von <td> ... </td> Inhalte erzeugen alles was davor und danach kommt wird vom System vorgegeben.

    Es ist grundsätzlich keine gute Idee, Tabellen-Layout mit CSS-Layout zu mischen - das sei nur am Rande erwähnt.

    Ist es möglich, dass ich einen Footer (für den IE) erstellen kann, der unten am Fenster "klebt" auch wenn die Seite größer als das Fenster ist.  ... dann soll ein Scrollbalken erscheinen aber der Footer soll beim Scrollen fest am unteren Fensterrand bleiben.

    Was mir gerade noch einfällt: Du könntest für den IE über einen CSS Hack (z.b. * html) angeben, dass dieser den Footer mit 16 px Abstand vom Unterrand positionieren soll - 16 px entsprechen im IE zumindest unter WinXP der Breite eines Scrollbalkens.

    MfG, Dennis.

    --
    Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:| mo:} zu:|
    Ein wirklich weiser Mann spielt nie mit einem Einhorn Bockspringen. (Häfft)
  2. Hallo,

    Ist es möglich, dass ich einen Footer (für den IE) erstellen kann, der unten am Fenster "klebt" auch wenn die Seite größer als das Fenster ist.  ... dann soll ein Scrollbalken erscheinen aber der Footer soll beim Scrollen fest am unteren Fensterrand bleiben.

    Es gibt ja verschiedene Möglichkeiten position:fixed für den IE nachzubilden, notfalls auch per
    expression, scrollbarem Div-Container oder über entspr. Möglichkeiten bei html und body, vgl.
    z.B. Zwei Spalten Two Columns XHTML Tableless Layout und Position Fixed für alle Browser per CSS.
    Hast du in der Richtung schon verschiedenes probiert?

    Grüsse

    Cyx23

    1. Ich habe es fast, aber halt noch nicht ganz -
      so ich hoffe es kommt an:

      <html>
      <head>
      <style>
      .button {
          background-color:#527bb9;
          border:none;
          color:#ffffff;
          height:18px;
          white-space:nowrap;
          text-align:center;
      }
      .button_mo {
          background-color:#ff6600;
          border:none;
          color:#ffffff;
          height:18px;
          white-space:nowrap;
          text-align:center;
      }

      /* Positionierung des feststehenden Footers */

      body {
          position:absolute;
          background:#FFFFFF;
      }

      html, body{
       top:0; left:0; right:0;
          min-height:100%;
          margin:0;
          padding:0;
          width:100%;
      }

      #content_container
      {
          margin:0;
       padding-bottom:20px;
       z-index:2;
      }

      #footer_container {
          position:fixed;
          bottom:0; left:0; right:0;
          text-align:center;
          margin:0;
          height: 19px;
          z-index:3;
      }

      #footer
      {
       position:absolute;
          top:0; left:0; right:0; bottom:0;
       background:#cccccc;
       text-align:left;
       border-top: 1px solid white;
       width: 769px;
       z-index:3
      }

      /* Positionierung des feststehenden Footers */
      /* Angaben nur für den Internet Explorer mittels Star-HTML-Hack */

      * html, * html body {
          margin:0;
          padding:0;
          height:100%;
          overflow:hidden;
      }

      * html #footer_container {
          text-align:left;
          position:absolute;
          width:100%;
          padding-right:16px;
      }

      * html #footer {
          background:#cccccc;
          text-align:left;
          border-top: 1px solid white;
          width: 769px;
          height:100%;
          position:static;
      }

      * html #content_container {
          position:absolute;
          top:0; bottom:0; left:0; right:0;
          height:100%;
          width:100%;
          overflow:auto;
          margin:0;
      }

      </style>
      </head>

      <body style="margin:0px; background-color:#fff;">
      <table cellpadding="0" cellspacing="0" bgcolor="white" height="100%" width="769" border="0">
      <tr><td>das soll der Typo3 Kopf sein</td></tr>
      <tr><td height="100%" valign="top">
      <div class="content">
      <!-- ab hier kann ich machen was ich will! -->

      <div id="content_container">
      Hier kommt nun Inhalt bis zum Abwinken.
      Tabelen, divs etc.:
      <br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
      <br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...
      </div>
      <div id="footer_container">
      <div id="footer">
      <table style="border-top: 1px solid white;" bgcolor="#cccccc" border="0" cellpadding="0" cellspacing="0" height="19" width="100%">
      <tbody><tr>
      <td><div style="white-space:nowrap;">mein Footertext</div></td>
      <td width="100%">&nbsp;</td>
      <td style="margin: 0px; padding: 0px 0px 0px 1px;" align="right" height="18" valign="top" width="1"><div class="button" onmouseover="this.className='button_mo';" onmouseout="this.className='button';" height="18px" name="close" onclick="window.close();">Schließen</div></td>
      </tr>
      </tbody></table>
      </div>
      </div>

      <!-- leider kann ich ab hier nichts mehr verändern -->

      </div>
      </td></tr>
      <tr><td></td></tr>
      </table>
      </body>
      </html>

      1. Hallo,

        scheint ja grundsätzlich schon zu funktionieren (habe erstmal mit IE6 geschaut).

        Du kannst ja noch etwa am CSS arbeiten, vielleicht

        table{width:100%}

        Und schauen was mit dem Typo3 Kopf passiert, soll er mitsrcollen?

        Grüsse

        Cyx23

        1. Hi,

          ja, das Teil soll mitscrollen. Bei mir wird es aber unterscrollt und das so schlecht, dass man den Text durchsieht.

          Ich muss auch mal die Implementation des Ganzen in die eigentliche Seite checken, denn irgendwie kommen da noch keine Scrollbalken. ... Können divs die im content_container liegen das verhalten stören, so dass es nicht wie gewünscht funktioniert? ... außer wenn man closing div's vergisst?

          Gruß, Lars.