Matthias: fixe Bereiche im IE 6

Hallo!

Ich bin gerade dabei, eine Website mit ineinander verschachtelten frames/iframes von ihrem kläglichen Dasein zu erlösen, und ein schönes div-basiertes Spaltenlayout zu basteln. Das klappt auch wunderbar, allerdings bin ich jetzt auf ein Problem gestossen, über dass sich
http://de.selfhtml.org/css/layouts/fixbereiche.htm
leider ausschweigt:
Der IE-Workaround sorgt dafür, dass ALLE nicht "static" positionierten Elemente "fix", also nicht scrollbar, positioniert werden.

Das sollte erstens auf
http://de.selfhtml.org/css/layouts/fixbereiche.htm
unbedingt erwähnt werden, schliesslich sorgt dieser kleine Nachteil der dort vorgestellten Lösung dafür, dass diese Methode praktisch unbrauchbar wird, wenn komplexere Layouts im "Content" verwendet werden sollen (z.B. CSS-basierte "image-maps").

Und zweitens ist meine Frage: Gibt es noch eine andere Möglichkeit für den IE? Sonst muss muss ich nicht nur reumütig zu den Frames zurückkehren, sondern habe mich ach gründlich blamiert, weil ich allen - inklusive des Chafs - versichert habe, diese veraltete Technik bräuchte man heute nicht mehr.

  1. hi,

    Ich bin gerade dabei, eine Website mit ineinander verschachtelten frames/iframes von ihrem kläglichen Dasein zu erlösen, und ein schönes div-basiertes Spaltenlayout zu basteln.

    Dabei sollte man vielleicht auch mal überlegen, ob wirklich alle Elemente, die vorher durch Frames "fixiert" waren, auch nachher noch fixiert sein _müssen_.
    Übermäßiger Einsatz von fixer Positionierung verschenkt schließlich wertvollen Platz - und wer ein Frames-Layout lediglich "nachbaut", hat am Ende vielleicht gar nicht viel verbessert.

    Der IE-Workaround sorgt dafür, dass ALLE nicht "static" positionierten Elemente "fix", also nicht scrollbar, positioniert werden.

    Das umgehe ich bei solchen Layouts meist dadurch, dass ich dem Scrollcontainer position:relative verpasse - dann kann ich ohne Probleme Kindelemente auch absolut positionieren, ohne dass diese dadurch fixiert würden.
    Außerdem braucht es dann kein position:static mehr für Elemente, die lediglich "ganz normal" fließen sollen.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallo wahsaga!

      Dabei sollte man vielleicht auch mal überlegen, ob wirklich alle Elemente, die vorher durch Frames "fixiert" waren, auch nachher noch fixiert sein _müssen_.
      Übermäßiger Einsatz von fixer Positionierung verschenkt schließlich wertvollen Platz - und wer ein Frames-Layout lediglich "nachbaut", hat am Ende vielleicht gar nicht viel verbessert.

      Nun ja, wenn es nach MIR ginge, müsste oben kein breiter Titelbalken mit Firmenlogo stehen, und die Navi könnte ruhig auch wegscrollen.. zumindest bei den Leuten, die veraltete Browser einsetzen, die kein CSS beherrschen. (Soo lang sind die seiten nun auch wieder nicht..) Aber es geht an der Stelle nicht nach mir.

      Der IE-Workaround sorgt dafür, dass ALLE nicht "static" positionierten Elemente "fix", also nicht scrollbar, positioniert werden.

      Das umgehe ich bei solchen Layouts meist dadurch, dass ich dem Scrollcontainer position:relative verpasse - dann kann ich ohne Probleme Kindelemente auch absolut positionieren, ohne dass diese dadurch fixiert würden.
      Außerdem braucht es dann kein position:static mehr für Elemente, die lediglich "ganz normal" fließen sollen.

      Sollte die Lösung so einfach sein? Ich habe es versucht, aber ich verstehe nicht ganz was Du meinst.. ich habe folgendes stylesheet für IE: (fast direkt von SelfHTML "geklaut")

      <!--[if lt IE 7]><style type="text/css">
        @media screen {
          html, body {
            height: 100%;
         overflow-y: hidden;
          }
          #wrapper {
            height: 100%;
         width: 1031px;
         overflow: auto;
          }
          #main_content {
            position: static;
         padding-top: 160px;
          }
        }
      </style><![endif]-->

      Bitte frag mich nicht, warum die Seite 1031px breit sein und am linken Rand kleben muss.. dat is halt so. (wenn ich mal etwas Zeit habe, werd ich zumindest die Titelgrafiken so anpassen, dass ich in der Breite auf 1000px runtergehen kann, und was die positionierung angeht, auch nochmal meine Überredungskünste ins Feld führen)

      Wo soll die position:relative jetzt hin, so dass es im IE6 noch geht?

      Wird der main content relativ positioniert, scrollt nur noch der (unsichtbare) wrapper-div.
      Wird der wrapper-div relativ positioniert, srollt alles.
      Wird html oder der body (oder beides) relativ positioniert, ändert sich garnichts.

  2. Hi,

    Der IE-Workaround sorgt dafür, dass ALLE nicht "static" positionierten Elemente "fix", also nicht scrollbar, positioniert werden.

    Das sollte erstens auf
    http://de.selfhtml.org/css/layouts/fixbereiche.htm
    unbedingt erwähnt werden,

    Da magst Du recht haben - zumindest in einem Nebensatz.

    schliesslich sorgt dieser kleine Nachteil der dort vorgestellten Lösung dafür, dass diese Methode praktisch unbrauchbar wird, wenn komplexere Layouts im "Content" verwendet werden sollen (z.B. CSS-basierte "image-maps").

    Das finde ich nicht. Es ist lediglich die (absolute) Positionierung von Elementen nicht möglich, aber ein komplexes Layout kommt in aller Regel sehr gut ohne Positionierungen aus - zumal wenn die Navigation bereits positioniert ist.

    weil ich allen - inklusive des Chafs - versichert habe, diese veraltete Technik bräuchte man heute nicht mehr.

    Das stimmt doch auch bis auf sehr wenige Ausnahmen. Ich kann mir nicht vorstellen, daß Dein Layout eine solche Ausnahme darstellt.

    freundliche Grüße
    Ingo

    1. schliesslich sorgt dieser kleine Nachteil der dort vorgestellten Lösung dafür, dass diese Methode praktisch unbrauchbar wird, wenn komplexere Layouts im "Content" verwendet werden sollen (z.B. CSS-basierte "image-maps").

      Das finde ich nicht. Es ist lediglich die (absolute) Positionierung von Elementen nicht möglich, aber ein komplexes Layout kommt in aller Regel sehr gut ohne Positionierungen aus - zumal wenn die Navigation bereits positioniert ist.

      Das komplexe Layout, dass ich unterzubringen versuche, ist sowas hier:
      http://www.frankmanno.com/ideas/css-imagemap

      Wie geht das ohne Positionierungen?

      weil ich allen - inklusive des Chafs - versichert habe, diese veraltete Technik bräuchte man heute nicht mehr.

      Das stimmt doch auch bis auf sehr wenige Ausnahmen. Ich kann mir nicht vorstellen, daß Dein Layout eine solche Ausnahme darstellt.

      siehe oben.

      1. Hi,

        Das komplexe Layout, dass ich unterzubringen versuche, ist sowas hier:
        http://www.frankmanno.com/ideas/css-imagemap

        Wie geht das ohne Positionierungen?

        Komplex finde ich das zwar nicht, aber ohne absolute Positionierung geht das natürlich nicht.

        freundliche Grüße
        Ingo

        1. Hi,

          Das komplexe Layout, dass ich unterzubringen versuche, ist sowas hier:
          http://www.frankmanno.com/ideas/css-imagemap

          Wie geht das ohne Positionierungen?

          Komplex finde ich das zwar nicht, aber ohne absolute Positionierung geht das natürlich nicht.

          freundliche Grüße
          Ingo

          Nun, komplexität ist immer relativ. komplexer als eine einfach folge von <hx> und <p>s mit ein paar listen drin ist es schon.

  3. Problem gelöst!

    Und hier habe ich die Lösung gefunden (vielen Dank an alle Mitwirkenden):
    http://www.piranho.com/home/workshops/showworkshop.php?xid=6c6378425ab4651ebb0543a5120b0ad2&cat1=1&cat2=7&id=3156

    Hier mein neuer Stylesheet:

    <!--[if lt IE 7]><style type="text/css">
      @media screen {
    html, body {
    height: 100%;
    overflow-y: hidden;
    }
    #wrapper {
    position : relative;
    height : 100%;
    width: 1031px;
    overflow : auto;
    }
    #main_content {
    position: relative;
    }
    }
    </style><![endif]-->

    Der entscheidende "Trick", der auf der SelfHTML-Seite nicht erwähnt wird: auch der wrapper-container braucht ein posistion:relative, dann kann man auch den Inhaltscontainer auf relative setzen. Und dann kann man auch im inhaltscontainer postion:irgendwas einsetzen.

    Ich hoffe, diese Info taucht in der nächsten Version von SelfHTML auf.. wo kann man solche Anmerkungen hinschicken?

    1. hi,

      Der entscheidende "Trick", der auf der SelfHTML-Seite nicht erwähnt wird: auch der wrapper-container braucht ein posistion:relative, dann kann man auch den Inhaltscontainer auf relative setzen. Und dann kann man auch im inhaltscontainer postion:irgendwas einsetzen.

      Ja - sagte ich das nicht? :-)

      gruß,
      wahsaga

      --
      /voodoo.css:
      #GeorgeWBush { position:absolute; bottom:-6ft; }
      1. hi,
        Ja - sagte ich das nicht? :-)

        Ja, das sagtest Du. aber ich habs erst nicht kapiert, bzw. es hat nicht fuktioniert weil ich noch ein anderes Problem hatte. Jetzt gehts aber gut :)

  4. Hallo.

    ein schönes div-basiertes Spaltenlayout

    Was denn nun?
    MfG, at

    1. Hallo.

      ein schönes div-basiertes Spaltenlayout

      Was denn nun?
      MfG, at

      Kann Dir nicht ganz folgen.. was ist die Frage?