✔ Transparente Layer

Status
Nicht offen für weitere Antworten.
nordi

nordi

Erfahrenes Mitglied
Hi Leute, ich will einen Layer auf meiner Seite transparent machen. Mit dem Firefox wird das auch alles prima angezeigt, aber der IE macht Schwierigkeiten. Könnt ihr euch mal das Stylesheet angucken ob man dieses noch für den IE optimieren kann?

Code: 
style type="text/css">
<!--
//Setzt den Hintergrund auf 80 % Alpha
#shoutbox {
	background-color: #fff;
	filter:alpha(opacity=80);
	opacity: 0.8;
	-moz-opacity:0.8;
	}
//Setzt die Schriftfarbe auf 100 %
	.sbtext {
	color: #000;
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;
	position: relative;
	}
-->
</style>

Vielen Dank
 
Der IE benötigt eine Höhenangabe, um den Opacity-Filter darzustellen.

Code: 
style type="text/css">
<!--
/* Setzt den Hintergrund auf 80 % Alpha */
#shoutbox {
	background-color: #fff;
	filter:alpha(opacity=80);
	opacity: 0.8;
	-moz-opacity:0.8;
	height: 1%;
	}
/* Setzt die Schriftfarbe auf 100 % */
	.sbtext {
	color: #000;
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;
	position: relative;
	}
-->
</style>
Anmerkung: Kommentare werden in CSS mit /* */ maskiert.
 
Ok, habs probiert - aber es wird nicht transparent angezeigt. Die Kommentare habe ich nur zur Erklärung hingeschrieben ;) Kann das wirklich am "height" liegen?
 
Habe deine CSS-Angaben incl. der Höhenangabe erfolgreich im IE (6.0 | Win2000) getestet.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body {
background: url([Grafik-URI]);
}

#shoutbox {
        background-color: #fff;
        filter:alpha(opacity=80);
        opacity: 0.8;
        -moz-opacity:0.8;
        height: 1%;
        }

        .sbtext {
        color: #000;
        filter:alpha(opacity=100);
        opacity: 1;
        -moz-opacity:1;
        position: relative;
        }
-->
</style>

</head>
<body>

<div id="shoutbox">
 <div class="sbtext">dummy text</div>
</div>

</body>
</html>
 
Mh..komisch. Bei mir klappt das nicht! Bei mit sieht der Layer so aus:

Code: 
<div id="shoutbox" style="position:absolute; left:80px; top:99px; width:173px; height:575px; z-index:1">
  <? include("shoutbox.php"); ?>
</div>

Kann das mit dem " style="position ..... " zu tun haben? Sonst ist bei mir alles identisch wie bei dir?
 
Hi

habe mir gerade deine Seite angesehen.
Firefox 1.5 zeigt es komplett richtig an (alles schön Transparent ;))
IE 7 Beta 2 zeigt es, wie sollte es anders sein ohne Transparent an.

Gruß
Max
 
Ja Frage ist nun, warum? Es ist ja genau der gleiche Code, wie "michaelsinterface" ihn gepostet hat - bei ihm wird er aber angezeigt!
 
In der Online-Shoutbox tauchen ja plötzlich Elemente auf, die ebenfalls einen weissen Hintergrund besitzen:

Code: 
<div id="shoutbox" style="position:absolute; left:80px; top:99px; width:173px; height:575px; z-index:1">
  </head>
<body leftmargin="0" topmargin="0" bgcolor="#FFFFFF">
.
.
.
<td bgcolor="#FFFFFF"> 

</div>
Zum Vergrößern anklicken....
Das schliessende </head> und <body> haben an dieser Stelle des Quelltextes überhaupt nichts zu suchen.

Am Ende des Quelltextes sind mir zwei schliessende </div> aufgefallen, die kein öffnendes <div> besitzen.


Wenn ich die Seite an den w3c-Validator schicke, wirft dieser rekordverdächtige 142 Fehlermeldungen aus (!)

-> Result for http://www.stokesdesign.de/new/master.php - W3C Markup Validator

no comment...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück