Rouven: Quirks vs. 1.0strict: Body ohne Overflow, Div Padding/Overflow

Hello,

ich kämpfe seit zwei Stunden mit stumpfen Waffen den Kampf gegen CSS. Leider mögen meine Browser nicht so wie ich. Beim nachfolgend vorgestellten Beispiel lässt sich mein Problem mit Firefox nachvollziehen, wobei ich prinzipiell eine relativ flächendeckende Lösung suche.
Warum mache ich das ganze hier? Ich habe ein Hintergrundbild - dieses soll sich nicht bewegen - okay, Background fixed wäre denkbar - reicht leider nicht: ich habe weiterhin ein Menü, position absolute mit top und right 0, also oben rechts in der Ecke. Dieses soll immer sichtbar sein, ebenso ein Bild, das sich oben links bei 0,0 aufhält. Das Hintergrundbild soll bildschirmfüllend sein.
Nun kommt ein Inhaltsbereich, der oben frühestens nach Abschluss des Menüs, angenommen 125px, beginnen darf. Der Inhalt kann beliebig lang werden, d.h. es muss gescrollt werden können.

Vielleicht hat jemand direkt die rettende Idee, wie man diese Elemente erschaffen kann, dann bitte um Tipps...
Zumindest Firefox würde im Quirks Mode eine Lösung schlucken, nicht jedoch im Standards-Compliance-Mode.
Wie komme ich aus der Nummer wieder raus? Gibt es eine günstigere Aufteilung der Seite?

Danke euch für eure Tipps.

MfG
Rouven

--
-------------------
sh:| fo:} ch:? rl:( br:& n4:{ ie:| mo:} va:) js:| de:] zu:| fl:( ss:) ls:& (SelfCode)
Let Bygones Be Bygones  --  Robert Pitscottie: "Chronicles of Scotland"
  1. Hello,

    ach ja, falls jemand dieses SELFHTML-Beispiel im Hinterkopf hat, das funktioniert nur unter größeren Schwierigkeiten: Der 125px große freie Bereich oben soll das Hintergrundbild zeigen und nicht vom Inhalt überdeckt werden. Das deckt IMHO das Beispiel nicht ab, es geht davon aus, dass es den Inhaltsbereich hinter den Rest schieben kann.

    MfG
    Rouven

    --
    -------------------
    sh:| fo:} ch:? rl:( br:& n4:{ ie:| mo:} va:) js:| de:] zu:| fl:( ss:) ls:& (SelfCode)
    Unser Problem ist, dass wir eine Demokratie entwickelt haben, was nicht immer der richtige Weg ist  --  Bernie Ecclestone zu den lästigen Diskussionen um Regeländerungen in der Formel 1
  2. Hi,

    ich kämpfe seit zwei Stunden mit stumpfen Waffen den Kampf gegen CSS.

    Mit ihm zusammenzuarbeiten finde ich im allgemeinen produktiver, als gegen es zu kaempfen :-)

    Beim nachfolgend vorgestellten Beispiel lässt sich mein Problem mit Firefox nachvollziehen, wobei ich prinzipiell eine relativ flächendeckende Lösung suche.
    Warum mache ich das ganze hier? Ich habe ein Hintergrundbild

    Wo? Sehe in keinem der beiden Beispieldokumente mit meinem Opera eins.

    • dieses soll sich nicht bewegen - okay, Background fixed wäre denkbar - reicht leider nicht: ich habe weiterhin ein Menü, position absolute mit top und right 0, also oben rechts in der Ecke. Dieses soll immer sichtbar sein, ebenso ein Bild, das sich oben links bei 0,0 aufhält.

    Also willst du eigentlich position:fixed nutzen, statt absolute>

    Das Hintergrundbild soll bildschirmfüllend sein.

    Dann mach's ausreichend gross, oder lass' es kacheln.

    Nun kommt ein Inhaltsbereich, der oben frühestens nach Abschluss des Menüs, angenommen 125px, beginnen darf.

    Wenn wir die 125px "annehmen" - gehen wir dann von einer festen absoluten Groesse aus, oder nicht?

    Der Inhalt kann beliebig lang werden, d.h. es muss gescrollt werden können.

    Das ist ja normalerweise auch der Fall, wenn man keine absurden Konstrukte bastelt.

    Vielleicht hat jemand direkt die rettende Idee, wie man diese Elemente erschaffen kann, dann bitte um Tipps...

    Mir ist noch nicht klar, was du eigentlich erreichen willst.
    Eine detailiertere und nachvollziehbarere Beschreibung waere schoen.

    MfG ChrisB

    1. Hello,

      Wo? Sehe in keinem der beiden Beispieldokumente mit meinem Opera eins.

      jupp, korrekt, habe ich der Vereinfachung halber herausgenommen. Habs jetzt auf besonderen Wunsch mit dazugestellt :-)

      Also willst du eigentlich position:fixed nutzen, statt absolute>

      ja, würde ich. Aber dann war da noch der IE...

      Das Hintergrundbild soll bildschirmfüllend sein.
      Dann mach's ausreichend gross, oder lass' es kacheln.

      ist es.

      Wenn wir die 125px "annehmen" - gehen wir dann von einer festen absoluten Groesse aus, oder nicht?

      jup, für das Menü.

      Mir ist noch nicht klar, was du eigentlich erreichen willst.
      Eine detailiertere und nachvollziehbarere Beschreibung waere schoen.

      Am Ende hätte ich gerne das, was der Firefox in der Quirksmode-Variante zeigt, also einen beliebig großen Bereich für Inhalte, der aber links und oben Freiraum lässt und das ganze vor einem festen Hintergrundbild.

      MfG
      Rouven

      --
      -------------------
      sh:| fo:} ch:? rl:( br:& n4:{ ie:| mo:} va:) js:| de:] zu:| fl:( ss:) ls:& (SelfCode)
      "I wish it need not have happened in my time" - "So do I, and so do all who live to see such times. But that is not for them to decide. All we have to decide is what to do with the time that is given us."  --  J.R.R. Tolkien: "The Lord Of The Rings: The Fellowship Of The Ring"
      1. Hi,

        Also willst du eigentlich position:fixed nutzen, statt absolute>
        ja, würde ich. Aber dann war da noch der IE...

        Da waeren nur IEs < 7 - der 7er unterstuetzt position:fixed, und fuer aeltere kann man in diesem Fall entweder bequem auf absolute ausweichen (dann scrollt's halt mit weg, so what), oder den bekannten Workaround implementieren, wenn man diesen Zusatzaufwand fuer einen derart veralteten Browser in Kauf nehmen will.

        Am Ende hätte ich gerne das, was der Firefox in der Quirksmode-Variante zeigt, also einen beliebig großen Bereich für Inhalte, der aber links und oben Freiraum lässt und das ganze vor einem festen Hintergrundbild.

        Und das willst du wirklich so haesslich haben, mit "halbem" Scrollbalken, der die Optik von Frames wiederbelebt?

        Warum denn nicht einfach das Menue oben fix positionieren, den Inhalt per entsprechendem margin-/padding-top auf Abstand halten - und gluecklich sein?

        MfG ChrisB

        1. Hello,

          Warum denn nicht einfach das Menue oben fix positionieren, den Inhalt per entsprechendem margin-/padding-top auf Abstand halten - und gluecklich sein?

          Na ja, also die Idee mit Fixed wäre halt ein anderer funktionierender Ansatz. Ich wäre mit meinem Endergebnis (auch wenns ggf. Frameoptik ist) auch zufrieden. Ich habe zwar nicht wirklich eine Zielgruppe für die Webseite (nein, kein Intranet, trotz nachfolgender Aussage), aber wenn ich an meine Arbeitskollegen denke, bei uns in der Firma bspw. ist der IE7 immer noch weitgehend tabu. Ja, klar, im Zweifel könnte man damit leben, vielleicht arbeite ich mal in diese Richtung...

          MfG
          Rouven

          --
          -------------------
          sh:| fo:} ch:? rl:( br:& n4:{ ie:| mo:} va:) js:| de:] zu:| fl:( ss:) ls:& (SelfCode)
          We found ourselves looking upon a familiar sight. We were home. How do you pick up the threads of an old life? How do you go on... when in your heart you begin to understand... there is no going back? There are somethings that time cannot mend... some hurts that go too deep... that have taken hold.  --  The Lord of the Rings: The Return of the King (Peter Jackson)
          1. Hi,

            Na ja, also die Idee mit Fixed wäre halt ein anderer funktionierender Ansatz. Ich wäre mit meinem Endergebnis (auch wenns ggf. Frameoptik ist) auch zufrieden.

            Na ja, du kannst auch Menue *und* Inhaltsbereich absolute positionieren - fuer Inhalt dann top- (in Menuehoehe) *und* bottom-Koordinate angeben, so dass sich die Hoehe daraus ergibt.
            Pferdefuss: Auch das kapieren IE < 7 noch nicht ...

            MfG ChrisB

            1. Hello,

              okay, danke schonmal bis hierhin - dann mal zwei Fragen, um das Ausmaß der Übel abzuschätzen:

              1. du hast gemeint ich solle padding+margin einsetzen, damit Menü und Inhalt sich nicht in die Quere kommen. Wie hast du dir das vorgestellt? Wie gesagt, ich kann den Inhalt _nicht_ hinter das Menü scrollen lassen, weil das Menü stellenweise keinen Hintergrund hat.

              Na ja, du kannst auch Menue *und* Inhaltsbereich absolute positionieren - fuer Inhalt dann top- (in Menuehoehe) *und* bottom-Koordinate angeben, so dass sich die Hoehe daraus ergibt.
              Pferdefuss: Auch das kapieren IE < 7 noch nicht ...

              Okay, in welcher Reihenfolge wäre es geschickt die Angaben zu notieren? Spätere überschreiben frühere, oder wie geht der IE mit dem Konflikt um? Sonst könnte man zumindest dafür sorgen, dass er die Top-Positionierung akzeptiert und dann bottom ignoriert...

              MfG
              Rouven

              --
              -------------------
              sh:| fo:} ch:? rl:( br:& n4:{ ie:| mo:} va:) js:| de:] zu:| fl:( ss:) ls:& (SelfCode)
              "I wish it need not have happened in my time" - "So do I, and so do all who live to see such times. But that is not for them to decide. All we have to decide is what to do with the time that is given us."  --  J.R.R. Tolkien: "The Lord Of The Rings: The Fellowship Of The Ring"
              1. Hi,

                1. du hast gemeint ich solle padding+margin einsetzen, damit Menü und Inhalt sich nicht in die Quere kommen. Wie hast du dir das vorgestellt? Wie gesagt, ich kann den Inhalt _nicht_ hinter das Menü scrollen lassen, weil das Menü stellenweise keinen Hintergrund hat.

                Warum kann's denn keinen bekommen?
                Wenn du doch sowieso ein "bildschirmfuellendes" Hintergrundbild hast - waer's dann nicht moeglich, dieses auch dem Menue zu verpassen? (Ja, kommt auf die Ausrichtung dieses Hintergrundbildes an.)

                Na ja, du kannst auch Menue *und* Inhaltsbereich absolute positionieren - fuer Inhalt dann top- (in Menuehoehe) *und* bottom-Koordinate angeben, so dass sich die Hoehe daraus ergibt.
                Pferdefuss: Auch das kapieren IE < 7 noch nicht ...
                Okay, in welcher Reihenfolge wäre es geschickt die Angaben zu notieren? Spätere überschreiben frühere, oder wie geht der IE mit dem Konflikt um?

                Weiss ich nicht mehr genau ... ich glaube zwar, mich zu erinnern, dass er die top-Angabe beruecksichtig, und bottom aber ignoriert, sprich die Hoehe nicht entsprechend anpasst -

                Sonst könnte man zumindest dafür sorgen, dass er die Top-Positionierung akzeptiert und dann bottom ignoriert...

                • aber anstatt mich darauf zu verlassen, wuerde ich dann doch lieber auf Nummer sicher gehen, und bottom ggf. per Hack/CC auf den Defaultwert auto zuruecksetzen.

                MfG ChrisB

                1. Hello,

                  weil das Menü stellenweise keinen Hintergrund hat.
                  Warum kann's denn keinen bekommen?

                  Na ja, ich könnte einen Streifen meines Hintergrundbildes in 125px Höhe schneiden, das Bild ist "oben links" positioniert, d.h. ich müsste auf die volle Breite gehen und 125px abschneiden. dummdidumm, ich werd mir mal was überlegen...
                  Danke dir auf jeden Fall...

                  MfG
                  Rouven

                  --
                  -------------------
                  sh:| fo:} ch:? rl:( br:& n4:{ ie:| mo:} va:) js:| de:] zu:| fl:( ss:) ls:& (SelfCode)
                  Buy when there's blood running in the street and sell when everyone is pounding at your door, clawing to own your equities  --  Wisdom on Wallstreet
                  1. Hi,

                    Na ja, ich könnte einen Streifen meines Hintergrundbildes in 125px Höhe schneiden, das Bild ist "oben links" positioniert, d.h. ich müsste auf die volle Breite gehen und 125px abschneiden.

                    Wozu abschneiden?
                    Verpasse dem Menue doch einfach das selbe Hintergrundbild, wie dem Rest der Seite ...

                    MfG ChrisB

                    1. Hello,

                      Verpasse dem Menue doch einfach das selbe Hintergrundbild, wie dem Rest der Seite ...

                      *Hand an die Stirn klatsch* bin ich froh, dass ich beruflich was mache, wovon ich mehr verstehe...

                      MfG
                      Rouven

                      --
                      -------------------
                      sh:| fo:} ch:? rl:( br:& n4:{ ie:| mo:} va:) js:| de:] zu:| fl:( ss:) ls:& (SelfCode)
                      He is entertaining both out of the car and in the car because if you tell him that a corner is almost flat then he is the guy who is going to try to take it flat even if it means shunting it the other side of it, he will come with the data and say 'hey, I may have crashed and destroyed the car, but I was flat-out'. That is an interesting quality that he has!  --  Team Member on Jacques Villeneuve
                      1. Hi,

                        *Hand an die Stirn klatsch* bin ich froh, dass ich beruflich was mache, wovon ich mehr verstehe...

                        ... sprach der kurzfristig als Ersatz fuer den Chirurgen Eingesprungene, bevor er das Skalpell ansetzte. :-)

                        MfG ChrisB