CSS: Hintergrund mit doppeltem Farbverlauf

Wie üblich besteht die eigentliche Herausforderung dieser CSS-Technik darin, die unerwarteten Macken und Probleme der Browser-Kompatibilität auszubügeln. In diesem Fall steht man vor folgenden Problemen:

• Der Farbverlauf auf der rechten Seite ist nur so hoch wie der Inhalt des main div-Elements. Eigentlich sollte er über die gesamte Höhe des Browserfensters gehen.
• Über dem Farbverlauf auf der rechten Seite ist eine Lücke, die dort eigentlich nicht hingehört.
• Die Höhe des rechten Farbverlaufs ist in unterschiedlichen Browsern nicht identisch.

Folgenden Änderungen am CSS-Code sind vorzunehmen um diese Probleme zu beheben:

Als Erstes wurde für die Hintergrundregeln die Kurzschreibweise gewählt. So ist zum Beispiel die left-top-repeat-y-Regel background:#FFFFFF url(bodywrapgrad.gif) in der body-Style-Anweisung nur eine kompaktere Möglichkeit, die folgenden Regeln zu schreiben: background-color:#FFFFFF; background-image:url(bodywrapgrad.gif); background-position:left top; background-repeat:repeat-y;.

Die zusätzliche Regel height:100% für das body-Element ist bereits die halbe Lösung um den Internet Explorer dazu zu bewegen, den rechten Farbverlauf über die gesamte Höhe des Browserfensters anzuzeigen. Die andere Hälfte dieser Lösung wäre eine entsprechende Regel (height:100%) für das #bkgnd2-div-Element. Leider beißt sich diese Regel mit der Höheneinstellung für andere Browser (height:auto), sodass ein zusätzliches Style-Element mit einem speziellen Selektor für den Internet Explorer erforderlich wird, um diesem seine nicht standardkonforme Regel für die Höheneinstellung beizubringen (* html #bkgnd2).

Aber das wahre Geheimnis, den rechten Farbverlauf dazu zu bringen, die gesamte Höhe des Browserfensters einzunehmen, besteht darin, das #bkgnd2-div-Element absolut zu positionieren (position: absolute). Ein solches absolut positioniertes div-Element verlangt natürlich Regeln für Positionierung (top:0px; right:0px) und Größe (width:100%). Die Regel min-height:100% stellt sicher, dass das div-Element samt seinem Hintergrund immer die ganze Höhe des Browserfensters ausfüllt, selbst wenn der Inhalt dies nicht tut. Und die Regel height:auto sorgt dafür, dass das div-Element auch den gesamten Inhalt umfasst, wenn dieser über die ursprüngliche Browserhöhe hinausgeht. Der Internet Explorer unterstützt das min-height-Attribut nicht, aber die Regel height:100% in der * html #bkgnd2-Style-Anweisung sorgt dort für einen ähnlichen Effekt.

Die Lücke über dem rechten Farbverlauf in Abbildung B wird durch ein Zusammenfallen der Ränder (margin collapse) verursacht: Der obere Rand des Überschrifttextes bricht aus den umgebenden div-Elementen aus und fungiert als Rand für das #bkgnd2 div-Element. Die Standardlösung, um diesen unerwünschten Effekt zu verhindern, besteht darin, das Element mit dem problematischen Rand mit einem Füllabstand oder einem Rahmen zu versehen. In diesem Fall löst ein Füllabstand von 1 Pixel (padding:1px) in der #main-Style-Anweisung das Problem.

Das Ergebnis (Abbildung C und Abbildung A) erzielt den gewünschten Effekt unabhängig davon, wie viel Inhalt im #main-div-Element enthalten ist, und funktioniert in allen Browsern, die der Autor bislang getestet hat. (Hinweis: Dieser Code wurde mit den aktuellen Windows-Versionen von Internet Explorer, Firefox, Netscape, Mozilla und Opera getestet.)