matte: Button wird nicht richtig wiedergegeben

Hallo,

ich möchte meiner loginbox ein paar schöne button spendieren.

Der code meiner loginbox enthält folgendes:

<script language="javascript">  
 function changeBox()  
 {  
    document.getElementById('div1').style.display='none';  
    document.getElementById('div2').style.display='';  
    document.getElementById('password').focus();  
 }  
 function restoreBox()  
 {  
    if(document.getElementById('password').value=='')  
    {  
      document.getElementById('div1').style.display='';  
      document.getElementById('div2').style.display='none';  
    }  
 }  
</script>  
<table width="144" border="0" cellpadding="0">  
<form action="http://www.domain.com/mail/index.php?action=login" method="post">  
<input type="hidden" name="do" value="login" />  
<tr>  
<td height="22" align="center" valign="top" width="144" colspan="2">  
<input name="email_full" type="text" value="E-mail" onBlur="if(this.value=='') this.value='E-mail';" onFocus="if(this.value=='E-mail') this.value='';">  
</tr>  
<tr>  
<td height="24" align="center" valign="top" width="144" colspan="2">  
<div id="div1">  
<input name="pass_temp" type="text" value="Password" size="20"  
maxlength="20" onfocus="changeBox()" />  
</div>  
<div id="div2" style="display:none">  
<input name="password" id="password" type="password" value="" size="20"  
maxlength="20" onBlur="restoreBox()" />  
</div>  
</td>  
</tr>  
<tr>  
<td height="24" style="font-size:0.8em" align="left" valign="top" width="100%">  
</td>  
</tr>  
<td height="28" align="center" valign="top" width="136">  
<input type="submit"value="Login" style="float: left; font-family:Verdana; font-size:8pt"></form>  
<form action="http://www.domain.com/mail/index.php?action=signup" method="post">  
<input type="submit"value="Signup" style="float: left; font-family:Verdana; font-size:8pt"></form>  
</td>  
</table>

Jetzt möchte ich mit css den Button Login und Signup ein neues Aussehen geben.

Dazu ersetze ich in den Button

Für login

<input type="submit"value="Login" style="float: left; font-family:Verdana; font-size:8pt">

durch

<input type="submit"value="Login" class="button">

ersetzt.

Leider wird der Button aber nicht richtig wiedergegeben

Rufe ich den Button hingegen mit

<a class="button" href="#">Login</a>

auf, erscheint er zwar korrekt, aber es wird auf die Art der Login nicht ausgeführt.

Meine Frage: Woran liegt es, dass der Button nicht angezeigt wird?

Besten Grüß matte

  1. Jetzt möchte ich mit css den Button Login und Signup ein neues Aussehen geben.

    Dazu ersetze ich in den Button

    Für login

    <input type="submit"value="Login" style="float: left; font-family:Verdana; font-size:8pt">

    durch

    <input type="submit"value="Login" class="button">

    ersetzt.

    Leider wird der Button aber nicht richtig wiedergegeben

    Rufe ich den Button hingegen mit

    <a class="button" href="#">Login</a>

    auf, erscheint er zwar korrekt, aber es wird auf die Art der Login nicht ausgeführt.

    Meine Frage: Woran liegt es, dass der Button nicht angezeigt wird?

    Das weiss dein CSS-File, in welchem du die Klasse button gestyled hast, oder sonst irgend etwas geschrieben hast, das auf das Element zutrifft.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische