Koos Jaspers : CSS: IE Workaround für background:fixed

IE - background:fixed - Headers und Footers

Da wurden schon einige Möglichkeiten beschrieben um in IE die CSS Eigenschaft background:fixed zu emulieren.
Die wirklich aller-einfachste, die bisher nicht in SELFHTML erwähnt wurde, benutzt die vielseitige, aber wenig benützte, Explorer CSS Eigenschaft 'expression'.

Beispiel zum ausprobieren:
-----------------------------------------------------------
<head>
<style>
.kopfzeile {   position:absolute;
               left:10px;
               top:expression(body.scrollTop+'px');
               font-size:14pt;background-color:#005;
               color:#ffa;width:100%;}
.fusszeile {   position:absolute;
               left:2px;
               top:expression(body.scrollTop+body.clientHeight-20);
               font-size:14pt;background-color:#005;
               color:#ffa;width:100%;}
</style>
</head>

<body>
<span class=kopfzeile>Dies is eine Kopfzeile</span>
<span class=fusszeile>Hier steht ein Footer</span>
Weitere Text usw<br><br><br><br><br><br><br>
Weitere Text usw<br><br><br><br><br><br><br>
Weitere Text usw<br><br><br><br><br><br><br>
Weitere Text usw<br><br><br><br><br><br><br>
Weitere Text usw<br><br><br><br><br><br><br>
</body>
-------------------------------------------------------------

Die 'expression' wird dynamisch verarbeitet, wenn gescrollt wird !
Also hat man in diesem Beispiel richtige 'header' und 'footer' Zeilen.
Es ist klar dass es weiterhin nog viele Gelegenheiten geben könnte  diese Eigenschaft zu benutzen, die auch verfügbar ist in allen anderen CSS Eigenschaften.

Herzlichen Gruss
Koos Jaspers, Rotterdam

  1. Hallo,

    Da wurden schon einige Möglichkeiten beschrieben um in IE die CSS Eigenschaft background:fixed zu emulieren.
    Die wirklich aller-einfachste, die bisher nicht in SELFHTML erwähnt wurde, benutzt die vielseitige, aber wenig benützte, Explorer CSS Eigenschaft 'expression'.

    ja, die ist aber nur eine Art "verstecktes" Javascript in CSS eingebettet. Hat ein IE-User also Javascript deaktiviert (was angesichts gewisser Sicherheitslücken sogar MS gelegentlich empfiehlt), dann werden diese Pseudo-CSS-Eigenschaften auch ignoriert.

    Insofern: Nicht empfehlenswert, IMHO.

    Herzlichen Gruss
    Koos Jaspers, Rotterdam

    Groeten naar onze Nederlandse buurt,
     Martin

    --
    Schon gewusst, dass Aftershave trotz des Namens eigentlich eher fürs Gesicht gedacht ist?
    1. Naja Martin,

      Wenn du einfach empfehlst keine Javascripts mehr zu benutzen, tcha, dann gibt's auch gar kein Zweck mehr eine SELFHTML Javascript Verzeichnis zu lesen ...

      Oder habe ich etwas üdersehen ?

      Koos jaspers

      1. Hallo Koos,

        Wenn du einfach empfehlst keine Javascripts mehr zu benutzen, ...

        das hast du falsch verstanden.
        Ich empfehle aber, *im IE* kein Javascript zu benutzen, weil der IE nicht zwischen offiziellem Javascript und MS-spezifischen JScript unterscheiden kann. Und mit JScript hat der Betreiber einer Website die Möglichkeit, auf ziemlich intime Details des jeweiligen Systems zuzugreifen (vor allem, wenn auch noch ActiveX zugelassen wird).

        tcha, dann gibt's auch gar kein Zweck mehr eine SELFHTML Javascript Verzeichnis zu lesen ...

        Doch, für die Benutzer von Browsern, bei denen man Javascript anständig kontrollieren kann, ist das durchaus okay. Aber die kennen wieder nicht die Pseudo-CSS-Waffe "expression".

        Oder habe ich etwas üdersehen ?

        Wer weiß ...

        Goedenavond,
         Martin

        --
        Um die Wahrheit zu erfahren, muss man den Menschen widersprechen.
          (George Bernhard Shaw)
  2. Hi,

    IE - background:fixed - Headers und Footers
    Da wurden schon einige Möglichkeiten beschrieben um in IE die CSS Eigenschaft background:fixed zu emulieren.

    .kopfzeile {   position:absolute;
                   top:expression(body.scrollTop+'px');}
    .fusszeile {   position:absolute;
                   top:expression(body.scrollTop+body.clientHeight-20);}

    könntest Du jetzt noch erläutern, was das mit background:fixed zu tun haben soll?

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. oops! - habe gestern slecht geschlafen

      es handelt sich hier um position:fixed

    2. Hallo Andreas,

      könntest Du jetzt noch erläutern, was das mit background:fixed zu tun haben soll?

      Offenbar ist position:fixed gemeint.
      Es gibt allerdings einen Zusammenhang mit background:fixed, auch wenn
      der Ausgangsposter vmtl. nicht darauf abzielen wollte:

      Mit

      * html body {  
           background: url(dummy) fixed;  
           }
      

      läßt sich das sprunghafte scrollen und Schmieren durch die DHTML-expressions
      etwas unterdrücken.

      Ist hier bei dem Artikel http://www.lipfert-malik.de/webdesign/tutorial/bsp/positionfixed.html
      u.a. auf Anregung von U. Kaiser 2005 ergänzt worden.

      Trotzdem halte ich expressions für nicht empfehlenswert, so wegen der
      CPU-Last oder auch Absturzgefahr bei bestimmtem Code und Rendermodus.

      Ansonsten scheint es mir derzeit sinnvoll, position:fixed nur noch
      für den IE 6 (solange er noch anzutreffen ist) und per CSS zu
      simulieren.

      Grüße

      http://www.kristof-lipfert.de/

  3. Entschuldigung !

    Die Zeile:

    top:expression(body.scrollTop+body.clientHeight-20);

    soll naturlich geändert werden in:

    top:expression(body.scrollTop+body.clientHeight-20+'px');

  4. Hallo,

    Die wirklich aller-einfachste, die bisher nicht in SELFHTML erwähnt wurde, benutzt die vielseitige, aber wenig benützte, Explorer CSS Eigenschaft 'expression'.

    Es gibt einige Nachteile mit expressions.

    Die Methode ist aber schon seit Langem hier vorgestellt worden:

    http://www.lipfert-malik.de/webdesign/tutorial/bsp/positionfixed.html

    Grüße

    http://www.kristof-lipfert.de/

    1. Entschuldigung Kristof !
      Hätte ich nur deine Nachricht früher gefunden !
      Vorher habe ich mit setInterval-Functionen rumstrapazieren um Positionen dynamisch zu ändern  ...

      Aber doch , vielen dank !

      Koos

      1. Hallo Koos,

        letztlich sind die expressions ja auch eine Anpassung a la JavaScript.

        Reichen dir die Möglichkeiten (position:fixed zu simulieren) von CSS
        nicht aus, oder wo siehst du Vorteile der expressions?

        Die "aller-einfachste" Methode scheinen mir expressions auch nicht zu
        sein, und angesichts der aktuellen Browserverbreitung mag es m.E.
        ausreichen, nur für den IE 6 per CSS bei position:fixed nachzuhelfen.

        Grüße

        Kristof