Page 1 of 1

Image doesn't follow line flow

Posted: Thu Sep 10, 2009 4:48 am
by Sindarin
Image

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>
 

Re: Image doesn't follow line flow

Posted: Thu Sep 10, 2009 11:46 am
by kaszu
This should fix it:

Code: Select all

.login_textfield, img {
    vertical-align: middle;
}

Re: Image doesn't follow line flow

Posted: Wed Sep 16, 2009 2:10 am
by Sindarin
It did the trick. Thanks. Also I found that using the top and position css property could fix it as well.