Dirk_1972: CSS-Problem opacity IE/Firefox

Beitrag lesen

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