rendered paste body<form class='sheet' action="{$urlPrefix}client/authenticate" method="post">
<fieldset id='center' style='width: 400px;'>
<legend>Login</legend>
<label for="username">Username:</label>
<input name="username" type="text" id="username" />
<label for="password">Password:</label>
<input name="password" type="password" id="password" />
<hr />
<div style='width: 280px; margin: 0 15px 0 auto;'>
<img id='freecapImage' src='{$urlPrefix}captcha.png?{php}echo time();{/php}' />
</div>
<div id='recaptcha'>
{php}
require_once('Lib/recaptcha/recaptchalib.php');
echo recaptcha_get_html(Zend_Registry::get('Config')->recaptcha->publickey);
{/php}
</div>
<label for="freecap">Captcha:</label>
<input name="freecap" type="text" id="freecap" />
<button type="submit">Login</button>
<div style="text-align:center;">
Don't have a account?<br />
<a href='{$urlPrefix}client/signup'>Register, it's FREE as in beer!</a>
</div>
</fieldset>
</form>
/* Form elements */
input, textarea {
font-family: Verdana, "Lucida Grande", sans-serif;
font-size: 11px;
padding: 2px;
background-color: #eaeaea;
border: 1px solid #333333;
}
input:focus, textarea:focus {
background-color: #f9e089;
}
button {
border: 3px double #999999;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
padding: 3px 10px 3px 10px;
background-color: #FFFFFF;
background-image: url(../images/button_bg.gif);
background-repeat: repeat-x;
color: #333333;
font-size: 11px;
font-weight: bold;
font-family: Verdana, "Lucida Grande", sans-serif;
}
button:focus {
-moz-border-bottom-colors: #999999 #738fb3 #999999;
-moz-border-right-colors: #999999 #738fb3 #999999;
-moz-border-top-colors: #CCCCCC #738fb3 #CCCCCC;
-moz-border-left-colors: #CCCCCC #738fb3 #CCCCCC;
}
button:active {
border: 3px double #CCCCCC;
border-top-color: #999999;
border-left-color: #999999;
-moz-border-bottom-colors: #999999 #738fb3 #999999;
-moz-border-right-colors: #999999 #738fb3 #999999;
-moz-border-top-colors: #CCCCCC #738fb3 #CCCCCC;
-moz-border-left-colors: #CCCCCC #738fb3 #CCCCCC;
padding: 4px 9px 2px 11px;
}
form.sheet fieldset {
border: 1px solid #3f5475;
padding: 12px;
display: block;
}
form.sheet fieldset legend {
background-color: #3f5475;
font-family: cursive, sans-serif;
font-size: 14px;
padding: 4px 6px 4px 6px;
color: white;
font-weight: bold;
_margin-bottom: 12px;
}
form.sheet label {
display: block;
width: 20%;
float: left;
margin-bottom: 10px;
padding-right: 2%;
margin-right: 1%;
_margin-right: 0;
text-align: right;
}
form.sheet input, form.sheet textarea {
display: block;
_margin-left: -7%; /* fixes a wacky IE bug */
width: 75%;
float: left;
margin-bottom: 10px;
}
form.sheet hr {
clear: both;
margin: 10px auto 10px auto;
width: 200px;
border-top: 1px dashed #CCC;
border-bottom: 1px solid #CCC;
color: #fff;
background-color: #fff;
height: 4px;
}
form.sheet br {
clear: left;
}
form.sheet button {
float: right;
margin-left: 14px;
}
/* End of form elements */
/* Fix the ReCaptcha's Style */
div#recaptcha * {
margin: 0px;
padding: 0;
border: 0;
font-family: helvetica,sans-serif;
font-size: 8pt;
color: black;
position: static;
top: auto;
left: auto;
right: auto;
bottom: auto;
}
div#recaptcha {
width: 318px;
margin: 0 auto 0 auto;
}
Even thought that CSS fixes MOST recaptcha CSS problems.... I'm still having issues.