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:
could you supply us with some markup or an url?
PaulOB
July 13, 2011, 7:32pm
3
You could try adding vertical-align:middle to the input but without mark-up we are just guessing.
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.
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>
PaulOB
July 13, 2011, 8:48pm
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.