27.02.2006

Verfixter Content im IE6

Silke Schümann wrote this 18:26:

Nachdem ich den vertikalen Streifen nicht über doppelte Hintergründe erreichen konnte, habe ich mich Wohl oder Übel zu einem anderen Aufbau durchringen müssen. Aber Webentwicklung wäre nicht Webentwicklung, wenn nicht ein Browser mehr Heckmeck treiben würde, als es meinen Nerven gut tut.

Es gibt einen einfachen aber genialen Trick, wie man mit reinen CSS-Anweisungen dem Internet Explorer 5 und 6 fixe Elemente geben kann. Hierzu muss man einfach das Skrollen in einen Div verlagern, der 100% in Höhe und Breite einnimmt und dann ist alles was außerhalb dieses <div>-Tags liegt eben genau dort, wo es steht. Und es steht immer dort, wo man es über Positioning fallen lässt. Cool!

Man sollte sich aber dann innerhalb dieses DIV nicht mehr einfallen lassen Dinge aus dem Fluß zu nehmen, denn wie auch schon bei dem Problem mit dem doppelten Hintergründen, packt der Browser nicht mehr die Zuordnung von Eltern- und Kind-Elementen. Leider kommt es noch schlimmer auch position: relative; wird zum Abenteuer.

Die Internet Explorer 5 und 6 benötigen ein position: relative; damit sie den Z-Index interpretieren können. Tja und den Z-Index brauche ich , wenn ich ein Kind-Element über die Grenzen des Eltern-Elemetes schicken will um eine Border abzudecken. Leider, leider, leider bleibt aber nun die runde Ecke starrsinnig an seinem Fleck.

Zuviel fix und kein relative weit und breit
(So als Leselineal wäre es sogar noch recht lustig.
Mit Opacity-Filtern könnte man per CSS daraus ein witziges Gimmick erzeugen.)

Im HTML:

  1. <div id="tec">
  2. <div id="tec1">
  3. <div id="teb"> </div>
  4. ###---CONTENT1---###
  5. </div>
  6. </div>

Im CSS:

  1. /*--- (Colors & Borders) --- */
  2. #tec1 {border: 1px solid #ed6b9e;}
  3. #teb {background: url(images/ecke_ro.gif) right top no-repeat;}
  4. /*--- (Positioning) --- */
  5. #tec1 {margin: 0 24px; height: 25em;}
  6. #teb {padding-top: -2px; margin-left: -1px; position: relative; z-index: 7;}

Aaargh … Vermalledeite Browserbugs. Nun also wegen einem Rahmen drei bis vier zusätzliche Elemente setzen und diese relative liquide auch noch Pixelgenau positionieren. Webdesigner wissen, dass das so ziemlich die Quadratur des Kreises ist. Aber im Augenblick will und kann ich mich auf nichts anderes konzentrieren. Und sollte dies nun bis über die Ladenschlußzeiten hinaus dauern, gibt es heute statt Brot und Milch zum Abendbrot Reis und Kräutertee. Und dabei dürfte ich schon seit Stunden hier nicht mehr sitzen und müsste, statt Pixel für potentielle Kunden schupsen, Möbel für den Fensterbauer rücken … na das gibt eine lustige Nacht.

* Filed under: Design, Webtechniken
* 1 Comment

One Response to “Verfixter Content im IE6”

  1. Templaterie Blog Says:
    February 27th, 2006 at 23:08

    [...] Die Illustration die in den beiden vorherigen Posts noch von einem anderen Mädchen bestritten wurde, kann ohnehin frei gewählt werden. Also hier noch eine Variation mit Mädchen mit Eis. Übrigens war das erste Bild noch der Photoshop-Entwurf. Es kommt selten vor, dass der Photoshopentwurf und der Screenshot so nahe bei einander liegen. [...]

Leave a Reply