Transparenz im Internet Explorer

[Jörg: den folgenden Beitrag habe ich aus diesem Thread abgetrennt]

Zitat von Jörg

Um den Auslösern solcher Probleme auf die Spur zu kommen, kann es helfen, testweise einzelne Elemente zu entfernen. Wenn du die Gallerie rausnimmst, fügt Opera unten keinen Scrollbalken mehr an. Anscheinend rechnet sie den margin-top Wert von #gallerie zu den 100% von body hinzu. Du kannst ja stattdessen padding-top verwenden.

super, jetzt ist alles an seinem platz :-)

"rgba(0,0,0,0.55)" ist CSS3 - das versteht vermutlich erst der IE9.

Auf dieser Seite ist erklärt, wie Transparenz auch in älteren Browserversionen funktioniert:

http://www.quirksmode.org/css/opacity.html

ich habe versucht die transparenz im explorer mit dieser im link beschriebenen CSS anweisung zu erreichen:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
	filter: alpha(opacity=50);					// second!

hat leider keinerlei wirkung gezeigt. wie setzte ich den code denn am besten ein z.b. in diesen abschnitt?

#neu {
	width: 222px;
	position: absolute;
	left: auto;
	top: 122px;
	height: 467px;
	text-decoration: none;
	text-align: left;
	color: #FFF;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	right: 0px;
	background-color: rgba(0,0,0,0.55);
}

Zitat von Jörg

Du musst auch die Hintergrundfarbe definieren, also nicht mehr den rgba() Wert, den ältere IE-Versionen nicht interpretieren können:

background-color: rgba(0,0,0,0.55);

... sondern stattdessen auf herkömmliche Weise nur die Hintergrundfarbe:

background-color: #000;

Danach kannst du auch die Transparenz auf herkömmliche Weise definieren:

opacity: .55;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
filter: alpha(opacity=55);

hallo jörg, ich bin jetzt endlich dazu gekommen die transparenz wie von dir beschrieben zu verändern.
dabei treten bei mir einige probleme auf:

auf dieser seite (http://www.harz4-umzug.de/slideshow/fadeoefnungszeiten.html) wird ist die schwarztransparenz von 12% nicht angezeigt und die schrift die in der fläche liegt ist nicht zu sehen.

die zugehöruge CSS des div ist diese:

#oeffnungszeiten {
	top: 160px;
	position: absolute;
	left: auto;
	right: 222px;
	bottom: auto;
	background-color: #000;
        opacity: .12;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=12)";
        filter: alpha(opacity=12);
	border-top-width: 5px;
	border-right-width: 0px;
	border-bottom-width: 5px;
	border-left-width: 5px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000;
    opacity: .55;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
    filter: alpha(opacity=55);
	border-bottom-color: #000;
    opacity: .55;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
    filter: alpha(opacity=55);
	border-left-color: #000;
    opacity: .55;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
    filter: alpha(opacity=55);
	width: 333px;
	height: 125px;
}

für die schrift ist diese CSS zuständig:

.oeffnungszeiten {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	text-align: center;
	vertical-align: middle;
	height: 28px;
	float: left;
	clear: right;
	margin-top: 45px;
	margin-right: auto;
	margin-bottom: 15%;
	margin-left: 76px;
	width: 180px;
	font-style: normal;
	line-height: 18px;
}

auf diesen beiden seiten werden die bilder in die transparenz miteinbezogen???


http://www.harz4-umzug.de/slideshow/gallerie.html

das zugehörige CSS schaut so aus:

#gallerie {
	top: auto;
	margin-right: auto;
	margin-left: auto;
	left: auto;
	right: auto;
	height: 475px;
	width: 520px;
	background-color: #FFF;
    opacity: .55;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
    filter: alpha(opacity=55);
	bottom: auto;
	padding-top: 120px;
	padding-bottom: auto;
}
#gallerie img {
	margin: 9px;
}

und http://www.harz4-umzug.de/slideshow/team.html

hier sind diese CSS zuständig:

#dasteam {
	height: 170px;
	width: 700px;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	float: none;
	text-align: center;
	vertical-align: middle;
	margin-bottom: auto;
	padding-top: 222px;
}
#dasteam img {
	vertical-align: middle;
	text-align: center;
}
.rahmenlinks {
	border: 14px solid #FFF;
    opacity: .55;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
    filter: alpha(opacity=55);
}
.rahmenrechts {
	border-top-width: 14px;
	border-right-width: 14px;
	border-bottom-width: 14px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #FFF;
    opacity: .55;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
    filter: alpha(opacity=55);
	border-right-color: #FFF;
    opacity: .55;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
    filter: alpha(opacity=55);
	border-bottom-color: #FFF;
    opacity: .55;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
    filter: alpha(opacity=55);
}