nicht angemeldet
[ InternetExplorer Bug ] position:relative;
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
-
Guten Morgen,
»»...versuchte ich zuerst z-index. Dies ignoriert der FF aber fleißig.
Tut er nicht. Benutze zusätzlich position absolute, dann wird ein Schuh draus.
Evtl. musst du den z-index bei 0 beginnen. Ich bin mir aber grad nicht sicher.Alternativ könntest du das Bild aber auch als Hintergrundbild eines
Kontainers benutzen und den Text dann z.B. in einem span mit Hintergrundfarbe darin positionieren.Grüße, Matze
-
Huhu :)
Tut er nicht. Benutze zusätzlich position absolute, dann wird ein Schuh draus.
Evtl. musst du den z-index bei 0 beginnen. Ich bin mir aber grad nicht sicher.Hm...muss ich doch glatt mal in der Kombi testen!
Alternativ könntest du das Bild aber auch als Hintergrundbild eines
Kontainers benutzen und den Text dann z.B. in einem span mit Hintergrundfarbe darin positionieren.Ha, ich wusste ich hab was vergessen :D Hintergrundbild ist leider nicht drin, da das Bild auf einer anderen Seite auch ein anderes ist. Leider :D Es handelt sich hierbei um ein Produktbild einer bestimmten Kategorie und da das Produkt bei jeder Kategorie ein anderes ist...
Ich husch dann mal deinen Vorschlag testen^^
Liebe Grüße,
Amá
-
Hallo,
Es handelt sich hierbei um ein Produktbild einer bestimmten Kategorie und da das Produkt bei jeder Kategorie ein anderes ist...
Solange die Maße gleich sind, ist der Inhalt des Bildes doch egal.
Bei einem Shop kann/sollte man unter gewissen Umständen auch immer das gleiche Format wählen.
Der Kontainer passt dann doch trotzdem "drum rum".Grüße, Matze
-
Hallo,
Es handelt sich hierbei um ein Produktbild einer bestimmten Kategorie und da das Produkt bei jeder Kategorie ein anderes ist...
Solange die Maße gleich sind, ist der Inhalt des Bildes doch egal.
Bei einem Shop kann/sollte man unter gewissen Umständen auch immer das gleiche Format wählen.
Der Kontainer passt dann doch trotzdem "drum rum".Grüße, Matze
Huhu Matze :)
Richtig :) Das Format, etc... bleibt gleich, da der Kunde allerding per CMS die Seiten selbst pflegt und keinerlei Erfahrung mit Hintergrund-Bildern, etc... hat, läd er ein Bild hoch, wählt es für den Artikel oben aus und dann sitzt es da als Bild. Leider gibt es in diesem CMS nicht die Möglichkeit, beim Anlegen / Verändern eines Artikels das CSS zu verändern, weshalb das Bild also nicht als Hintergrundbild eingesetzt werden kann :D
Dabei würde es die Sache soviel leichter machen... Hm...aber hab da was ausgetüffelt...Jetzt nur noch beten das es geht *g*
Liebe Grüße,
Amá
-
-
-
Und nochmal ich! :)
*schnief* Habe ich schon erwähnt, dass ich langsam an eine Verschwörung von Microsoft glaube? Den IE gibts doch 100% nur, um Entwicklern das leben schwer zu machen :D
Ich habe gerade mal ein wenig mit position: absolute; und dem z-index herumgespielt... Nun ja, im FF ist das kein Problem, aber mal wieder im IE *grml*
Der IE ist nämlich der wunderschönen Meinung, dass er den Container dann einfach mal so aus dem Sichtbarkeitsbereich des Browsers schieben müsste (einfach mal border: 1px solid; um den Kasten, dann sieht man, wo er hingeschoben wird). ich liebe den IE...aber er mich auch *seufz*
Leider kann ich den Containern, etc... aussenherum auch kein position: absolute oder relative, etc... geben um das Problem so zu fixen. Tue ich dies nämlich, haut es das Laayout durcheinander und wirkt sich seeeehr negativ auf meine Zentrierung aus. Apropos Zentrierung...Schaut es euch nicht mit IE5 oder 5.5 an, da geht das nämlich nicht *hust*
Trotzdem danke für den Vorschlag...ich geh mal weiter testen^^ irgendwie muss das doch gehen *eehrgeizig guck*
Liebe grüße,
Amá
-