Amarandel: [ InternetExplorer Bug ] position:relative;

Beitrag lesen

Wunderschönen guten "Morgen" alle zusammen :)

Ich hätte da mal ein kleines Problem. Ich mache gerade das HTML/CSS für eine Kundenwebsite, bei der ich auch ein Bild habe und eine Bildunterschrift, die in einem farbigen Kasten direkt in der unteren linken Ecke des Bildes stehen soll.

Das habe ich auch soweit ganz leicht hinbekommen. Ich habe zuerst das Bild im Quelltext und dann den Text. Mit margin-top: -18px; habe ich den Text mitsamt Kasten auch ganz leicht auf das Bild setzen können (muss leider so sein, da bei position-Positionierungen die nachfolgenden Objekte nicht mit hoch rutschen würden).
Damit die Hintergrundfarbe des Kastens im Firefox dann auch angezeigt wird, versuchte ich zuerst z-index. Dies ignoriert der FF aber fleißig.

Also habe ich position: relative; verwendet.
Zuerst dachte ich, dies würde einwandfrei funktionieren. bis ich mir das ganze im IE (sowohl 6 als auch 7) ansah und diesen verkleinerte, etc...
Hier verhält sich das position: relative; leider wie position: fixed;
Sobald gescrollt wird oder das Fenster größer/kleiner gezogen wird sieht man, was ich meine.

Ich habe nun schon ewig viel probiert. Ich habe ALLEN Elementen position: relative; gegeben und das funktionierte, da der Bug hiermit anscheinend auf alle Objekte wirkte und deshalb nicht mehr sichtbar war. Allerdings wurde das Layout in ein CMS eingefügt und war dank des auf alle Elemente angewendeten position: relative; leider nicht mehr sichtbar. Dumm gelaufen. Eine andere Lösung muss her.

Nachdem ich nun schon ein paar Stunden lang gegoogelt und gestöbert habe (wie ich mich kenne mit den falschen Begriffen -.-), hoffe ich, dass hier schon jemand Erfahrung mit diesem Bug hat und mir eventuell weiterhelfen kann. Ich habe auch ein kleines Example gebaut und online gestellt. Zu finden unter:

http://www.bad-request.de/tests/test.html

Hier ist auch nochmal der Quellcode den ich als Example verwendet habe (ausnahmsweise mal mit eingebettetem CSS *schnief*):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Bug-Example</title>
 <style type="text/css">
  * {
   padding: 0px;
   margin: 0px;
  }
  html {
   width: 100%;
  }
  body {
   width: 382px;
   margin: auto;
  }
  .imageSub {
   position: relative;
   height: 18px;
   width: 185px;
      padding: 4px 0px 0px 5px;
   margin: -22px 0px 0px 0px;
   color: black;
   background-color: red;
   font-size: 12px;
   font-weight: bold;
  }
 </style>
</head>
<body>
        <img src="microsoft.jpg" alt="Ohne Worte" />
  <div class="imageSub">Wer hat den IE entwickelt? -.-</div>
</body>
</html>

Danke schonmal an alle Leute, die es geschafft haben mein irre langes Geschwaffel bis zu dieser Zeile zu lesen *g*

Liebe Grüße,

Amárandel