✔ Tabellenloses Basislayout mit separat scrollbaren Blöcken - IE und FF unterschiedlich

[Maviee]

Hallo,

ich habe auf Basis des klasse Tutorials Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken

• Der mittlere Frame bekommt bei der Einstellung overflow: auto KEINEN Scrollbalken. Dieser Abschnitt lässt sich nicht scrollen
• Die Hintergrundgrafik wird nur bis zum Ende des letzten Elements eingefügt. Bei kleinen Seiten mit wenig Inhalt habe ich plötzlich leer Flächen ohne die Hintergrundgrafik
• Wenn ich die Pfeiltasten zum Scrollen benutze scrollt die ganze Seite (also inkl. Navi-Leiste und Headerbereich) mit
• Tabellenelemente werden bei der Einstelung overflow:auto extrem in die breite gezogen. overflow:visible zeigt die Tabellen korrekt an

Nach langem herumprobieren habe ich leider immer noch keine Möglichkeit gefunden die Seite im FF korrekt darzustellen. Hier ist mein CSS code:

      html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      border: 0;
      padding: 0;
  }
  body {
      overflow: hidden;  /* Scrollbalken im Fenster unterbinden */
  }
  #mitte {
      position: absolute;
      top: 120px;        /* Abstand zum oberen Fensterrand */
      left: 100px;        /* Abstand zum linken Fensterrand */
      overflow: auto;        /* Scrollbalken, falls notwendig */
      background-image: url(../../res/bg_blau.gif);
      background-repeat: repeat;
      background-attachment: fixed;
      z-index: 1;      
  }
  * html #mitte {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-top-width: 120px;    /* = Kopfzeilenhöhe */
      border-left-width: 100px;    /* = Spaltenbreite links */
      border-style: solid;
      background-attachment: fixed;
  }

  #mitte .inhaltDiv {
      margin: 5px;        /* Abstand des Inhalts zum Blockrand */
  }
  #oben {
      position: absolute;
      top: 0;            /* Abstand zum oberen Fensterrand */
      left: 0;        /* Abstand zum linken Fensterrand */
      right: 0;        /* Abstand zum rechten Fensterrand */
      height: 120px;        /* Blockhöhe */
      padding: 0;        /* Interpretation Boxmodell! */
      overflow: hidden;    /* Scrollbalken unterbinden */
      background-image: url(../../res/bg_blau.gif);
      background-repeat: repeat;
      z-index: 3;        /* höchste z-Ebene! */
  }
  * html #oben {
      width: 100%;
      height: 120px;
  }
  #oben .inhaltDiv {
  }
  #links {
      position: absolute;
      top: 120px;        /* Abstand zum oberen Fensterrand */
      left: 0;        /* Abstand zum linken Fensterrand */
      bottom: 0;        /* Abstand zum unteren Fensterrand */
      width: 100px;        /* Blockbreite */
      padding: 0;        /* Interpretation Boxmodell! */
      background-image: url(../../res/bg_blau.gif);
      background-repeat: repeat;
      z-index: 2;
  }
  * html #links {
      top: 0;
      width: 100px;
      height: 100%;
      border-top-width: 120px;    /* = Kopfzeilenhöhe */
      border-left-width: 0;
      border-bottom-width: 0;
      border-right-width: 0;
      border-style: solid;
  }
  #links .inhaltDiv {
  }

Kann mir jemand helfen mein CSS zu anzupassen, dass auch der FF die Seite korrekt darstellt ?

Veieln Dank im Vorraus

Gruß
Mav

 

[Quaese]

Re: Tabellenloses Basislayout mit separat scrollbaren Blöcken - IE und FF unterschied

Hi,

mir ist aufgefallen, dass du für Non-IE-Browser keine Grössenangaben für den Container mit der ID
#mitte angegeben hast. Ergänze den entsprechenden Selektor mal um die Eigenschaften
bottom und right.

#mitte{ /* Bisheriger Code*/
        bottom: 0;
        right: 0;
}

Vielleicht hilft das ja weiter.

Ciao
Quaese

 

[Maviee]

Du bist ein Gott! Das hat wirklich geholfen.

10000000 fach Danke


Gruß
Mav

 

[Maik]

Du bist ein Gott! Das hat wirklich geholfen.

10000000 fach Danke

Gruß
Mav

Wenn das Problem gelöst ist und alles funktioniert, dann markiere das Thema bitte auch durch einen Klick auf den 'Status-Button' rechts unterhalb des letzten Beitrags als erledigt.

Vielen Dank