Hallo,
I try to solve the following problem:
I have these formelements:
<input type="hidden" name="action" value="login">
<label for="login">Login</label>
<input name="login" type="text" size="20">
<br>
<label for="passwd">Password</label>
<input name="passwd" type="password" size="20">
<input type="image" style="border:0;" src=http://www.webdeveloper.com/forum/archive/index.php/"/images/login.gif" alt="Login">
and use this css style:
label {
font:0.75em Verdana, Arial, Helvetica, sans-serif;
width:80px;
padding-left:20px;
float:left;
display:block;
}
input {
font:0.75em/20px Verdana, Arial, Helvetica, sans-serif;
border:1px solid #666666;
}
I use the image as button because IE have some problems with styled input elements (submit).
The problem I have is that the button behind formfield jumps ca 5 px higher then the form field.
What is here the problem?input {vertical-align:bottom;}Hi Fang,
I tried this first with same ugly result...It lines up the input and image for me
btw no a good idea to mix em and px in font declarationIt lines up the input and image for me
I see, it looks that it have to do with the height of the input element because the image is also one...
btw no a good idea to mix em and px in font declaration
Youre right but how to calculate 1.5 em to 20 pixel height of an image?
Edit: Fang, take a look (als je zin hebt
) on my template site (the link in my signature) and you will see what whats wrong (the same result with IE 6.0 and Mozilla 1.8b) Thanks.A submit is not so bad:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>form fields</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
label {
font:0.75em Verdana, Arial, Helvetica, sans-serif;
width:80px;
padding-left:20px;
float:left;
display:block;
}
input {
vertical-align:bottom;
margin:0;
font:0.75em Verdana, Arial, Helvetica, sans-serif;
border:1px solid #666666;
}
#login {
background:#069;
color:#fff;
padding:0 1em;
font:0.55em "Arial Black", Arial, Helvetica, sans-serif;
}
-->
</style>
</head>
<body>
<div>
<label for="login">Login</label>
<input name="login" type="text" size="20">
<div>
<label for="passwd">Password</label>
<input name="passwd" type="password" size="20">
<input id="login" type="submit" value="LOGIN">
<input type="hidden" name="action" value="login">
</div>
</div>
</body>
</html>Thank you Fang!
sometimes it's so simple: "Arial Black"
I tried the same with small button and used Arial+bold ... this looks very ugly if your fontsize is very small.
But I', still confused about this strange behavior what about this thread is going
I try to solve the following problem:
I have these formelements:
<input type="hidden" name="action" value="login">
<label for="login">Login</label>
<input name="login" type="text" size="20">
<br>
<label for="passwd">Password</label>
<input name="passwd" type="password" size="20">
<input type="image" style="border:0;" src=http://www.webdeveloper.com/forum/archive/index.php/"/images/login.gif" alt="Login">
and use this css style:
label {
font:0.75em Verdana, Arial, Helvetica, sans-serif;
width:80px;
padding-left:20px;
float:left;
display:block;
}
input {
font:0.75em/20px Verdana, Arial, Helvetica, sans-serif;
border:1px solid #666666;
}
I use the image as button because IE have some problems with styled input elements (submit).
The problem I have is that the button behind formfield jumps ca 5 px higher then the form field.
What is here the problem?input {vertical-align:bottom;}Hi Fang,
I tried this first with same ugly result...It lines up the input and image for me
btw no a good idea to mix em and px in font declarationIt lines up the input and image for me
I see, it looks that it have to do with the height of the input element because the image is also one...
btw no a good idea to mix em and px in font declaration
Youre right but how to calculate 1.5 em to 20 pixel height of an image?
Edit: Fang, take a look (als je zin hebt
) on my template site (the link in my signature) and you will see what whats wrong (the same result with IE 6.0 and Mozilla 1.8b) Thanks.A submit is not so bad:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>form fields</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
label {
font:0.75em Verdana, Arial, Helvetica, sans-serif;
width:80px;
padding-left:20px;
float:left;
display:block;
}
input {
vertical-align:bottom;
margin:0;
font:0.75em Verdana, Arial, Helvetica, sans-serif;
border:1px solid #666666;
}
#login {
background:#069;
color:#fff;
padding:0 1em;
font:0.55em "Arial Black", Arial, Helvetica, sans-serif;
}
-->
</style>
</head>
<body>
<div>
<label for="login">Login</label>
<input name="login" type="text" size="20">
<div>
<label for="passwd">Password</label>
<input name="passwd" type="password" size="20">
<input id="login" type="submit" value="LOGIN">
<input type="hidden" name="action" value="login">
</div>
</div>
</body>
</html>Thank you Fang!
sometimes it's so simple: "Arial Black"
I tried the same with small button and used Arial+bold ... this looks very ugly if your fontsize is very small.
But I', still confused about this strange behavior what about this thread is going