Fragen zum Script - Problem mit IE

Status
Nicht offen für weitere Antworten.
speicher

speicher

Erfahrenes Mitglied
Hallo vielleicht kann mir ja jemand bei meinem kleinen Problem helfen. Was sich mit PS nicht hinreichend lösen ließ könnte, so denke ich mit CSS klappen. Es sieht auch alles gut aus, doch leider nur im Firefox.
Bei NN & IE klappt es gar nicht bzw. Nur Teilweise.

Was ich erreichen möchte ist die Überlagerung von 2 Bildern und einem halbtransparenten DIV, der durch ein teilweise transparentes Hintergrundbild so genannte TV-Linie erzeugt.
Der oberste Layer (prinz.gif) ist ein Bild von einem Fernseher, welches tranparent ist an Stelle der Bildröhre. Darunter soll das Div Fix und dann das Bild 3.jpg.

Prob NN : Nur das Div Fix und das "unterste" Bild (3.jpg) werden angezeigt.
Prob IE: Es wird nur die obere Hälfte vom prinz.gif angezeigt. Der Rest ist komplett.

Woran könnte das liegen
Danke für Eure Hilfe.




HTML: 
<html>
<head>

<style type="text/css">
<!--
body{
margin:0;
padding:0;
overflow:hidden;
}
#body2{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:10px;
overflow:auto;
}
#fix{
    position:absolute;
    top:200px;
    left:400px;
    width:300px;
    height:100px;
    background: url("1.gif") ;
    }
#body3{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
padding:10px;
overflow:auto;
}-->
</style>
</head>
<body>
<div id="body2">
<p>viel Text</p>
<p>viel Text</p><p>viel Text
<span style="position: absolute; left: 297; top: 136">
<img border="0" src="3.jpg" width="291" height="213"></span>
</p>
</div>
<div id="fix" style="filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;">
Immer an der gleichen Stelle </div>
<div id="body3">
<span style="position: absolute; left: 167; top: 42; z-index: 2">
<img border="0" src="prinz.gif" width="550" height="410"></span>
</div>
</body>
</html>
 
Vielleicht liegt es ja an den fehlenden PX-Einheiten für die Positionen der einzelnen DIV- und SPAN-Elemente? Kann den korrigierten Source-Code leider nicht überprüfen, da mir die benötigten Bilder fehlen:

Code: 
<html>
<head>

<style type="text/css">
<!--
body{
margin:0px;
padding:0px;
overflow:hidden;
}
#body2{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
padding:10px;
overflow:auto;
}
#fix{
    position:absolute;
    top:200px;
    left:400px;
    width:300px;
    height:100px;
    background: url(1.gif); /* ohne " " */
    }
#body3{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
padding:10px;
overflow:auto;
}-->
</style>
</head>
<body>

<div id="body2">
<p>viel Text</p>
<p>viel Text</p>
<p>viel Text
<span style="position: absolute; left: 297px; top: 136px;">
<img border="0" src="3.jpg" width="291" height="213"></span>
</p>
</div>

<div id="fix" style="filter:alpha(opacity=30); -moz-opacity:0.3;">
Immer an der gleichen Stelle </div>

<div id="body3">
<span style="position: absolute; left: 167px; top: 42px; z-index: 2;">
<img border="0" src="prinz.gif" width="550" height="410"></span>
</div>

</body>
</html>
greez, maik.l
 
Hallo,

die Einheiten sind jetzt alle auf "px" und die "" bei url() sind auch weg, das Bild aber unverändert. Hat noch jemand eine Idee?

Es ist bloß ärgerlich dass der Firefox es korrekt anzeigt. Ich meine, wenn es nirgends klappen würde wäre ich ja zumindestens in Sicherheit, dass irgendetwas falsch sein muss. Aber nun bin ich mir nur sicher, dass IE & NN ein Problem haben....
 
Hallo!

Nur so im schnellen drüber schauen, fällt mir auf, dass dieses alpha-Element, ebenso wie opacity doch vom IE nicht richtig unterstützt werden..

Ansonsten würde ich mir einfach drei divs übereinenader legen (mittels z-index und position:absolute), und auf diese jeweils das entsprechende Bild legen, sollte eigentlich klappen.
HTML: 
<style>
#div1 {position:absolute; z-index:1;}
#div2 {position:absolute; z-index:2;}
#div3 {position:absolute; z-index:3;}
</style>
<body>
<div id="div1>Erstes Bild</div>
<div id="div2>Zweites Bild</div>
<div id="div3>Drittes Bild</div>
</body>

Gruss
 
Hallo vielen Dank..jetzt funktioniert es. Ich kann mir nicht erklären, was hier falsch lief, aber so ist es ja manchmal....
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück