Image doesn't follow line flow

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Image doesn't follow line flow

Post 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>
 
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Image doesn't follow line flow

Post by kaszu »

This should fix it:

Code: Select all

.login_textfield, img {
    vertical-align: middle;
}
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Re: Image doesn't follow line flow

Post by Sindarin »

It did the trick. Thanks. Also I found that using the top and position css property could fix it as well.
Post Reply