Zur Navigation

Transparenz im Internet Explorer

1 andehrl

[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);
}

18.06.2011 14:49 | geändert von Jörg: 18.06.2011 19:26

2 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);

18.06.2011 19:32 | geändert: 18.06.2011 19:34

3 andehrl

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);
}




22.06.2011 18:41

4 Jörg

auf dieser seite (http://www.harz4-umzug.de/slideshow/fadeoefnungszeiten.html) wird ist die schwarztransparenz von 12% nicht angezeigt

Weil du die Werte weiter unten mehrfach mit 55% überschreibst

    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);

und die schrift die in der fläche liegt ist nicht zu sehen.

Ja, weil die Schriftfarbe gleich der Hintergrundfarbe ist

	background-color: #000;
	color: #000;

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

Wenn sie innterhalb von #gallerie liegen, sind sie natürlich von dessen Definitionen betroffen, also auch von der Transparenz, die du für das div definiert hast

22.06.2011 21:07 | geändert: 22.06.2011 21:07

Beitrag schreiben (als Gast)





[BBCode-Hilfe]