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:
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.)
Mehr Digitalisierung wird von den Unternehmen gefordert. Für KMU ist die Umsetzung jedoch nicht trivial,…
Der Nettoprofi wächst um 117 Prozent. Auch beim Umsatz erzielt die Facebook-Mutter ein deutliches Plus.…
Vom Standpunkt eines Verbrauchers aus betrachtet, stellt sich die Frage: Wie relevant und persönlich sind…
Scamio analysiert und bewertet die Gefahren und gibt Anwendern Ratschläge für den Umgang mit einer…
Seine Trainingsdaten umfassen 3,8 Milliarden Parameter. Laut Microsoft bietet es eine ähnliche Leistung wie OpenAIs…
Sie erlaubt eine Remotecodeausführung außerhalb der Sandbox. Betroffen sind Chrome für Windows, macOS und Linux.