Dirk_1972: CSS-Problem opacity IE/Firefox

SELF-Forum

CSS-Problem opacity IE/Firefox

Dirk_1972
– Informationen zu den Bewertungsregeln

Hallo,

ich wage mich derzeit ein bisschen mehr an CSS heran und komme leider derzeit an einem Problem einfach nicht weiter.
Zuerst möchte ich mich aber für meinen Code entschuldigen (ich weiß, von den Tabellen sollte ich mich so langsam mal verabschieden, aber wie gesagt, bin ja am lernen).
Ich versuche mit dem nachfolgendem Code folgendes zu realisieren:

  • Background-Grafik vollflächig über die gesamte Page
  • Logo einblendung
  • darunter abgedunkelte/transparente Fläche (800 x 400) mit dem Content
  • darunter Seitenende (Footer / nicht mit transparenter Fläche)
    Im IE funktioniert das ganze auch, aber im Firefox wird auch der eigentliche Content durchsichtig gemacht (wie die Fläche, damit der Hintergrund durchscheint).
    Sicherlich habe ich irgendwo einen (Denk-)Fehler, aber nur wo ?

Hier der verwendete Code:

<style type="text/css">  
html, body  
	{	margin:0;  
		padding:0;  
		width:100%;  
		height:100%;  
		overflow:hidden;  
		text-align:left;	}  
  
.content  
	{	position:absolute;  
		width:800px;  
		height:400px;  
		z-index:3;  
		font-family: Arial;  
		font-size: 12px;  
		color: #ffffff;  
		overflow:auto;  
		padding-top: 10px;  
		padding-left: 10px;  
		padding-bottom: 10px;  
		filter:alpha(opacity=100);  
		opacity:1.0;	}  
#background  
	{	position:absolute;  
		z-index:1;  
		width:100%;  
		height:100%;	}  
#cont  
	{	position:absolute;  
		width:100%;  
		height:100%;  
		top:80;  
		left:0;  
		overflow:auto;  
		z-index:2;		}  
.transbox  
	{	width:800px;  
		height:400px;  
		margin:0px 0px;  
		background-color:#000000;  
		border:0px solid black;  
		filter:alpha(opacity=60);  
		opacity:0.6;	}  
</style>

<body>  
<div>  
  
<img id="background" src="images/sbgr.jpg" alt="" title="" />  
  
	<div id="cont">  
		<div align="center">  
			<table border="0" width="800" cellspacing="0" cellpadding="0">  
				<tr>  
					<td>LOGO</td></td>  
					<td>LOGIN</td>  
				</tr>  
				<tr>  
					<td colspan="2">  
					<div class="transbox" id="cecontbgr">  
						<div class="content" id="cecont">  
						<table border="0" width="100%" cellspacing="0" cellpadding="0">  
							<tr>  
								<td>CONTENT</td>  
							</tr>  
						</table>  
						</div>  
					</div>  
					</td>  
				</tr>  
				<tr>  
					<td>FOOTER</td>  
				</tr>  
			</table>  
		</div>  
	</div>  
</div>  
</body>

Ich hoffe mir kann mal hier jemand auf die "Sprünge" helfen.

Gruss
Dirk

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS-Problem opacity IE/Firefox

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Im IE funktioniert das ganze auch, aber im Firefox wird auch der eigentliche Content durchsichtig gemacht

    Und genau letzteres ist auch das definierte Verhalten von opacity - diese bezieht sich auf ein Element und dessen sämtliche Inhalte.

    Der Alpha-Filter des IE macht offenbar etwas anderes, auch wenn er nach Beschreibung vorgibt, das gleiche zu tun.

    Wenn du lediglich eine teiltransparente Hintergrundfarbe haben willst - dann gebe auch eine solche an.
    Für aktuelle Browser als background-color in der rgba()-Notation.
    Und für ältere IE, die rgba() noch nicht unterstützen, mittels dem genannten Filter.

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln