dieselross: Probleme mit IE – 'mal wieder

Beitrag lesen

Hallo Gemeinde,

ich muss einen Anmeldeblock innerhalb eines absolut positionierten DIV ein- und ausblenden, was ja an sich kein Problem ist.
Das funktioniert auch ganz gut in einigermaßen modernen Browsern, aber ab IE8 abwärts geht's – na ja, eben abwärts.

So wird beispielsweise der Hintergrund meiner DIV-Box transparent, was gar nicht geht. Was mache ich falsch bzw., wie kann ich den IE überreden, es richtig zu machen?

der Code:~~~html <div id="anmeldung" style="display: none" >
<form id="anmeldeformular" action="">
<h3 id="anmeldungshead">
Anmeldung
</h3>
<div class="schliessbutton">
<a href="index.html">
X
</a>
</div>
<table id="anmeldetabelle">
<tr>
<td class="label">
Benutzername
</td>
</tr>
<tr>
<td class="eingabefeld">
<input type="text" size="10" maxlength="10" name="benutzereingabe"/>
</td>
</tr>
<tr>
<td class="label">
Passwort
</td>
</tr>
<tr>
<td class="eingabefeld">
<input type="text" size="10" maxlength="10" name="passworteingabe"/>
</td>
</tr>
<tr>
<td class="leerzeile">
&nbsp;
</td>
</tr>
<tr class="buttonzeile">
<td class="tabellenbutton">
Anmelden
</td>
</tr>
<tr>
<tr class="leerzeile">
&nbsp;
</tr>
</tr>
<tr>
<td class="vergessenlink">
<a href="#">Ich habe mein Passwort vergessen</a>
</td>
</tr>
</table>
</form>
<a href="#" class="registerbutton gelb">
<img src="images/Registrieren_Icon.png" alt="Registrieren_Icon" width="30" height="30">
<h3>Als Neukunde registrieren</h3>
</a>
<a href class="registerbutton gruen">
<img src="images/Zugangsdaten_Icon.png" alt="Zugangsdaten_Icon" width="30" height="30">
<h3>Zugangsdaten anfordern</h3>
</a>
</div>

und das css dazu:~~~css
#anmeldung {  
	position: absolute;  
	display: block;  
	right: 0px;  
	top: 80px;  
	background-color: rgba(163,71,156,1);  
	width: 300px;  
	min-height: 100px;  
	-moz-border-radius: 20px;  
	-webkit-border-radius: 20px;  
	border-radius: 20px;  
	z-index: 300;  
}  
#anmeldungshead {  
	margin: 10px;  
	margin-bottom: -10px;  
	font-size: 18px;  
	color: white;  
}  
.schliessbutton {  
	position: absolute;  
	right: 10px;  
	top: 10px;  
	width: 25px;  
	height: 25px;  
	z-index: 350;  
}  
.schliessbutton a {  
	display: table-cell;  
	text-align: center;  
	vertical-align: middle;  
	width: 25px;  
	height: 25px;  
	-moz-border-radius: 8px;  
	-webkit-border-radius: 8px;  
	border-radius: 8px;  
	background-color: red;  
	color: white;  
}  
#anmeldetabelle {  
	width: 280px;  
	margin: 0px auto 10px auto;  
}  
#anmeldetabelle thead {  
	padding: 10px 0px 5px 10px;  
}  
#anmeldetabelle .label {  
	color: white;  
	font-size: 12px;  
	height: 20px;  
	vertical-align: bottom;  
}  
#anmeldetabelle .eingabefeld {  
	width: 280px;  
	background-color: white;  
	height: 20px;  
	border: 1px solid #ddd;  
}  
.leerzeile {  
	line-height: 10px;  
	padding: 0px;  
}  
.tabellenbutton {  
	width: 280px;  
	height: 20px;  
	-moz-border-radius: 8px;  
	-webkit-border-radius: 8px;  
	border-radius: 8px;  
	color: white;  
	background-color: #53a890;  
	border: 2px solid #ddd;  
	display: table-cell;  
	text-align: center;  
	vertical-align: middle;  
	margin-top: 10px;  
	cursor: pointer;  
}  
.tabellenbutton:hover {  
	font-weight: bold;  
}  
.vergessenlink {  
	text-align: center;  
}  
.vergessenlink a {  
	text-decoration: underline;  
	color: white;  
}  
.vergessenlink a:hover {  
	color: red;  
}  
.registerbutton {  
	position: relative;  
	width: 115px;  
	height: 70px;  
	-moz-border-radius: 8px;  
	-webkit-border-radius: 8px;  
	border-radius: 8px;  
	padding: 10px;  
	text-align: center;  
	margin-left: 10px;  
	margin-bottom: 10px;  
	float: left;  
}  
.registerbutton img {  
	position: absolute;  
	left: 10px;  
	top: 10px;  
	margin-bottom: -100%;  
	margin-right: -100%;  
}  
.registerbutton:hover img {  
	width: 40px;  
	height: 40px;  
}  
.registerbutton h3 {  
	display: table-cell;  
	height: 70px;  
	vertical-align: bottom;  
	text-align: right;  
	font-size: 11px;  
	color: white;  
}  

Davon, dass der IE ab 7 abwärts auch noch das ganze Menü zerschießt will ich gar nicht erst anfangen, da werde ich wohl noch einiges an zusätzlichem CSS schreiben müssen.

Gruß
dieselross

--
- life's for learning -
Ceterum censeo IE esse delendam
besucht mich auf www.re-ality.de