Form input height

liunx · Jan 11, 2008

Good afternoon.

I'm trying to create a input to enter a date.
To do that I create a input with type text and a input with type button that launches the date choooser.

I try to set both inputs with the same height, but the text input has always two more pixels than the button input. I've confirmed that by seeing it's offsetHeight.

I tried to use a button element but the same happens.

Can anyone help me?

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>

* {
font-family: Tahoma, Arial, Helvetica, Sans-Serif; font-size: x-small; color: black;
margin: 0px;
padding: 0px;
}
</style>

<title>Form Elements</title>
</head>
<body>

<br/>
<input id="input1" style="height: 1.5em; border: 1px solid Black">
<input id="button1" style="height: 1.5em; width: 1.5em; border: 1px solid Black" value="..." type="button">
<br/>
<input id="input2" style="height: 1.5em; border: 1px solid Black; background: ButtonFace;">
<button id="button2" style="height: 1.5em; width: 1.5em; border: 1px solid Black;" >...</button>

<script>

var input1 = document.getElementById("input1");
var button1 = document.getElementById("button1");

alert("input1.offsetHeight = " + input1.offsetHeight);
alert("button1.offsetHeight = " + button1.offsetHeight);

var input2 = document.getElementById("input2");
var button2 = document.getElementById("button2");

alert("input2.offsetHeight = " + input2.offsetHeight);
alert("button2.offsetHeight = " + button2.offsetHeight);

</script>
</body>
</html>

Thanks in advance,
<a class="postlink" href="Migratehttp://www.quirksmode.org/css/tests/mozie_button.html">Migratehttp://www.quirksmode.org/css/te ... utton.html</a>

This will align the form elements in Mozilla and IE6, but a different solution is required for older versions of IE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Form elements</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

</style>

</head>
<body>
<form>
<button type="button">button</button><input value="Search"><input type="submit" class="submit" value="Submit">
</form>
</body>
</html>Hello Fang.
Thanks for your answer.

Just one question: Is it possible to use in your solution em instead of px in the input height?

Best Regrads,
MigrateThis would work, but other solutions are possible.
The solution a dependent on font-size.
<style type="text/css">

</style>Hello again!

Because my page has the following css, the code you suggested doesn't work. Can you tell me other ways to do this?

* {
font-family: Tahoma, Arial, Helvetica, Sans-Serif; font-size: x-small; color: black;
margin: 0px;
padding: 0px;
}

Best Regards,
Migrateinput{
height:1.4em;
padding:0;
border:1px solid #000000;
vertical-align:middle;
}
.submit {height:1.6em;}
button {
height:1.8em;
margin-bottom:-1px !important;margin:0;
vertical-align:bottom;
}Thanks again for your anwser Fang!

Just to make thinks a little harder

, is it possible to create a solution that works with all font size (using x-small, small, medium, larger, etc.). I'm asking this because Mozilla and IE6 give the user the possibility to change the font size.
If I increase the font size in Mozilla the code breaks.

Best Regards,
MigrateI don't think there is a single solution for all cases, just a solution for 'normal' text-size.

Form input height

liunx

Guest