
I am trying to create a login form using only css, but the problem is that everything is okay except for the "virtual keyboard" button which is off.
It's on the same line with the same size, what's wrong with it?
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Authentication Required</title>
<style type="text/css">
body
{
font-family: Verdana, Georgia, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration:none;
color:#000000;
text-transform: none;
vertical-align: baseline;
line-height: 15px;
letter-spacing:0px;
word-spacing:2px;
white-space:normal;
cursor:default;
}
a:link {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #4675FF;
text-decoration: none;
text-transform: none;
vertical-align: baseline;
line-height: 15px;
letter-spacing:0px;
word-spacing:2px;
white-space:normal;
cursor:pointer;
}
a:visited {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #245BFF;
text-decoration: none;
text-transform: none;
vertical-align: baseline;
line-height: 15px;
letter-spacing:0px;
word-spacing:2px;
white-space:normal;
cursor:default;
}
a:hover {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #2291FF;
text-decoration: underline;
text-transform: none;
vertical-align: baseline;
line-height: 15px;
letter-spacing:0px;
word-spacing:2px;
white-space:normal;
cursor:pointer;
}
a:active {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #6F93FF;
text-decoration: none;
text-transform: none;
vertical-align: baseline;
line-height: 15px;
letter-spacing:0px;
word-spacing:2px;
white-space:normal;
cursor:default;
}
.login_fieldset
{
overflow:hidden;
z-index:1;
width:270px;
min-width:270px;
height:auto;
min-height:100px;
margin-left:0px;
margin-right:0px;
margin-top:12px;
margin-bottom:12px;
padding-left:22px;
padding-right:6px;
padding-top:12px;
padding-bottom:12px;
border-color:#0066FF;
border-style:solid;
border-width:1px;
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration:none;
color:#000000;
text-transform: none;
text-align:left;
vertical-align: baseline;
line-height: 15px;
letter-spacing:0px;
word-spacing:2px;
white-space:normal;
display:table;
cursor:default;
}
.login_vk
{
z-index:1;
width:22px;
min-width:22px;
height:18px;
min-height:18px;
font-family: Verdana, Georgia, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#888888;
text-transform: none;
letter-spacing:0px;
word-spacing:2px;
margin-left:2px;
margin-right:2px;
margin-top:8px;
margin-bottom:8px;
padding-left:5px;
padding-right:5px;
padding-top:1px;
padding-bottom:0px;
cursor:pointer;
}
.login_textfield
{
z-index:1;
width:200px;
min-width:200px;
height:18px;
min-height:18px;
font-family: Verdana, Georgia, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#888888;
text-transform: none;
letter-spacing:0px;
word-spacing:2px;
border-color:#0066FF;
border-style:solid;
border-width:1px;
margin-left:2px;
margin-right:2px;
margin-top:8px;
margin-bottom:8px;
padding-left:5px;
padding-right:5px;
padding-top:1px;
padding-bottom:0px;
cursor:text;
}
.login_button
{
z-index:1;
width:100px;
min-width:100px;
height:26px;
min-height:26px;
font-family: Verdana, Georgia, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color:#888CCC;
text-transform: none;
letter-spacing:0px;
word-spacing:2px;
border-color:#0066FF;
border-style:solid;
border-width:1px;
margin-left:2px;
margin-right:2px;
margin-top:6px;
margin-bottom:0px;
padding-left:0px;
padding-right:0px;
padding-top:0px;
padding-bottom:0px;
background-color:#FFFFFF;
cursor:pointer;
}
</style>
</head>
<body>
<div id="wrapper" align="center">
<img src="files/images/site-manager-logo.png" alt="Site Manager" title="Site Manager" width="321" height="142" border="0" style="margin-bottom:32px;" />
<br/>Please enter a valid username and password<br/>
<form id="login_form" name="login_form" action="login.php" method="post" style="display:inline;">
<fieldset id="login_fieldset" class="login_fieldset">
<ins>U</ins>sername <br/>
<input name="form_username" type="text" id="username" class="login_textfield" size="28" maxlength="255" accesskey="u" tabindex="1" /><br/>
<ins>P</ins>assword <br/>
<input name="form_password" type="password" id="password" class="login_textfield" size="28" maxlength="255" accesskey="p" tabindex="2" /> <img src="files/images/virtual-keyboard.png" class="login_vk" border="0" /><br/>
<label for="form_remember"><input name="form_remember" type="checkbox" id="form_remember" value="1" accesskey="r" tabindex="3" /> <ins>R</ins>emember Me</label><br/><br/>
<input name="Login" type="button" id="login_button" class="login_button" value="Login" onclick="document.login_form.submit();" accesskey="l" tabindex="4" /><br/><br/>
<a class="resetpassword">Reset Password</a>
</fieldset>
</form>
</div>
</body>
</html>