Form height

HTML & CSS
1

Hi

When I change the height property on my form, the alignment goes of by a pixel. Why is this happening?

This only appears to be happening in firefox. It is fine in safari.

Here is the css:


 input {
background-color: #fff;
border-color: #666;
border-width:1px;
border-style:solid;
height: 50px;
}

Here is a screenshot:

2

could you supply us with some markup or an url?

3

You could try adding vertical-align:middle to the input but without mark-up we are just guessing.:slight_smile:

With form controls it could be any number of things so if you can post a link or some demo code showing the problem we’ll try to help.

4

Hi.

Here is form html


<form id="form1" name="form1" method="post" action="members.php?k=submit">
      <p>
        <label for="post"></label>
        <input name="post" type="text" id="post" style="width:400px"; />
        <input type="submit" name="button" id="button" value="Submit" style="width:150px"; />
      </p>
    </form>
5

Hi,

The code I gave you combined with using the correct dimensions on the submit works for me.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
input {
    background-color: #fff;
    border-color: #666;
    border-width:1px;
    border-style:solid;
    height:48px;
    padding:0;
    margin:0;
    vertical-align:middle
}
#button{height:50px}

</style>
</head>
<body>
<p>
    <label for="post"></label>
    <input name="post" type="text" id="post" style="width:400px"; />
    <input type="submit" name="button" id="button" value="Submit" style="width:150px"; />
</p>
</form>
</body>
</html>

Submit buttons and selects use the broken box model where padding and borders are added inside the specified height so you have to account for these case by case.