Weirdness: form button widths are off by 2px
I’ve been working on the redesign of Atomized off and on for over six months now, and I keep running into weird issues. Take this testcase, for example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Testcase</title>
<style type="text/css">
textarea, input
{
width: 100%;
border: 1px solid black;
display: block;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<form action="#">
<div>
<textarea name="comment" rows="0" cols="0"></textarea>
<input type="submit" value="post">
</div>
</form>
</body>
</html>
What you’d expect to see is a textarea on top of a button, both with the same width. But what you’d get is this:
The button is exactly 2 pixels narrower than the textarea. What’s going on here? I don’t know, but it happens to me in both Firefox 3.0b4 and Safari 3.1, so I hesitate to call this a rendering engine bug.
What’s even weirder is that it happens with widths specified in percent and ems. If I set the widths to 250px, the button is 248px. It happens with inputs of type submit and button, but not image or text (caveat: Safari give me an image control off by 1px, not 2, and things are way different with widths in ems).
The only thing I see is that it has to do with the borders. If I remove the borders, I get the correct (equal) widths. It’s as if the border width calculation is wrong for button inputs.
I don’t know why this is happening. I’d expect border width calculations to be different for block vs. inline elements, but I force both to block.
Daniel Burka came up with a workaround, which is to wrap the textarea in a block element with 2px of right padding. Adding 2px of right padding to the button did not change the width at all.
Here’s the markup with the correct widths:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Testcase</title>
<style type="text/css">
textarea, input
{
width: 250px;
font: Verdana 8pt;
border: 0px;
display: block;
padding: 0px;
margin: 0px;
}
.hack
{
padding-right: 2px;
}
</style>
</head>
<body>
<form action="#">
<div>
<div class="hack"><textarea name="comment" rows="0" cols="0"></textarea></div>
<input type="submit" value="post">
<input type="text" name="foo">
<input type="image" name="foo">
</div>
</form>
</body>
</html>
March 30th, 2008 at 7:36 pm
that’s quite odd! if you make the borders huge (like 16px) the error is magnified, looks like the diff is 2 x border width.
April 9th, 2008 at 3:43 pm
[...] problem with borders and widths has been [...]