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">
</td>
</tr>
<tr class="buttonzeile">
<td class="tabellenbutton">
Anmelden
</td>
</tr>
<tr>
<tr class="leerzeile">
</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