CSS: Div-Element von Hintergrund überblendet?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute position
bekommen
boykott
code
eigenschaft
element
erfahrungsbericht
index
internet
normalfall
position
posten
problem
reihenfolge
schrift
stehen
vordergrund
wetter
wirklichen fehler
zusammenhang
-
Guten Tag.
Folgendes: Ich bin da mal wieder am Werkeln an einer Seite. Nun habe ich auf der Hauptseite ein paar verschachtelte Div-Elemente. Mein Problem liegt darin, dass offenbar der Hintergrund (oder was auch immer) des einen Div-Elements über das andere liegt. Zumindest scheint das der Internet-Explorer so zu sehen. Also damit man sich das mal besser vorstellen kann:
<div style=\"width:200px; height:200px;background:url(foobar.png);\"> <div style=\"float:left; height:50px; width:50px;\"> /*inhalt*/ </div> </div>
Natürlich ist das schon stark vereinfacht. Für ganz interessierte: http://nerdinator.lima-city.de/dev/lol/index.php?target=home
Wer dort mit Firefox/Internetexplorer mal schaut, sollte eine \"News\"-Box auf der rechten Seite sehen, oder halt auch nicht.
Hat jemand eine Idee, was da zu machen wäre?
Beitrag geändert: 21.6.2008 3:15:55 von nerdinator -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Sowas kannst du mit einem z-index regeln:
http://www.css4you.de/z-index.html
http://www.selfhtml.net/css/eigenschaften/positionierung.htm#z_index
Der Internet-Explorer interpretiert das einfach völlig falsch... Im Normalfall werden DIV-Elemente in der Reihenfolge, in welcher sie im Quelltext stehen in den Vordergrund gerückt. Bei einer Verschachtelung ist der IE aber überfordert ;)
MfG
sebigisler -
Das mit dem Z-Index habe ich bereits versucht... s. Source.
Also wenn ich das nicht vollkommen falsch angefangen habe. Oo
Ich sehe den Fehler allerdings nicht.
Der Internet-Explorer interpretiert das einfach völlig falsch... Im Normalfall werden DIV-Elemente in der Reihenfolge, in welcher sie im Quelltext stehen in den Vordergrund gerückt. Bei einer Verschachtelung ist der IE aber überfordert ;)
Gibt es dazu eine \"Alternative\" bzw. eine Lösung, oder bleibt mir nur ein Microsoft-Boykott? -
also der 7er ie stellt es bei mir genauso wie der firefox dar
sorry hab den newstext übersehen
vielleicht weil die schrift zu gross ist
musst der schrift auf jeden fall noch ne klasse zu weisen warum auch immer
-
sorry hab den newstext übersehen
vielleicht weil die schrift zu gross ist
musst der schrift auf jeden fall noch ne klasse zu weisen warum auch immer
Ich werde daraus nicht ganz schlau: Welche schrift ist wo zu groß? Also bei einem anderen mit dem 7er IE ist das Problem genauso existent wie bei mir.
Vielleicht hast du irgendwelche anderen persönlichen Stylesheet-Plugins o.ä. drin? Oder ist es bei anderen auch so?
Aber entweder das Problem überfordert hier die meisten, oder das Wetter ist einfach zu gut, um hier ein gutes reply zu bekommen :( -
Nun, vielleicht ist es einfach so, dass niemand den wirklichen Fehler findet. Ich habe ihn auch nicht gefunden.
Es kann echt alles sein: das vergessene z-index:9->PX<-; oder, dass du mal <br> und mal <br /> benutzt (bezweifel ich alles)
wäre ich du, würde ich alles nochmal kürzen und schauen, wann es funktioniert und wann nicht. Danach dann uns deine Erfahrungsberichte Posten. Danach können wir dir sagen, was wahrscheinlich falsch ist...
-
Nun, vielleicht ist es einfach so, dass niemand den wirklichen Fehler findet. Ich habe ihn auch nicht gefunden.
Genau das wollte ich mit \"Aber entweder das Problem überfordert hier die meisten, oder das Wetter ist einfach zu gut, um hier ein gutes reply zu bekommen :(\" ausdrücken.
Es kann echt alles sein: das vergessene z-index:9->PX<-;
<div style=\"position:absolute; top:100px; left:100px; z-index:1; border:thin solid #804000;\">
So steht es bei SelfPHP als Beispiel geschrieben, nichts von px. Sicher, dass es da hin gehört?
dass du mal <br> und mal <br /> benutzt (bezweifel ich alles)
wäre ich du, würde ich alles nochmal kürzen und schauen, wann es funktioniert und wann nicht. Danach dann uns deine Erfahrungsberichte Posten.
Also ich habe nun in beide richtungen, nur <br> und nur <br /> ausprobiert, keine Wirkung. Das einzige was ich zum \"wann und wann nicht\" sagen kann ist: Bei Firefox nicht, bei IE schon. Also bleibt mir wohl vorerst doch nichts anderes, als ein Microsoft-Boykott. Die Armen Microsoft-User werden dann wohl nicht in den Genuss meiner wunderschönen Seite kommen ;)
Mal im ernst, falls wem was einfällt bitte ich um Hilfe. Wenn nicht: Trotzdem Schankedön ;) -
Ich denk mal, es liegt an der `position: relative;` in `#main-wnd`... Vielleicht funktioniert es, wenn du diese Eigenschaft wegmachst. Vielleicht liegt es auch an `overflow: scroll;`...
`z-index` bringt hier überhaupt nichts, weil die einzelnen <div>s nicht absolut positioniert sind.
Wie wär\'s, wenn du die Styles in der CSS Datei reinschreibst und nicht in Inline Styles?
Ryan
P.S. Die Eigenschaften `top`, `right`, `left`, `bottom` funktionieren nur im Zusammenhang mit `position: absolute;`, `position: relative;` und `position: fixed;`
Beitrag geändert: 21.6.2008 14:59:33 von ryanblack -
Ich denk mal, es liegt an der `position: relative;` in `#main-wnd`...
Das scheint es gewesen zu sein :)
P.S. Die Eigenschaften `top`, `right`, `left`, `bottom` funktionieren nur im Zusammenhang mit `position: absolute;`, `position: relative;` und `position: fixed;`
Viele dieser Werte sind einfach Restmüll aus früheren \"Versuchen\". Ich miste das bei gelegenheit mal aus.
Vielen Dank für deine Hilfe.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
