Form field vs button sizing

A client has requested that form buttons be the same height as text fields 
and selectboxes.

While allowing some flexibility in text sizing, we do want it to be 
smaller than the body text.

Has anyone solved this consistently across all browsers which support form 
styling?

My observations so far:

MSIE6 - all form elements are independent of View|Text size setting. Form 
element text sizing is presumably derived from Windows UI font sizing?
Button matches field height well initially, but enlarges and shrinks more 
than a field when text size is scaled via css.

Firebird - Text and elements scale with text zoom. There is a bug with 
select elements where option text scales up but the widget doesn't, 
causing truncation. Relative height of button to field is consistent - 
about 2 pixels too small.

Opera - form element text set via preferences (selectboxes use the button 
font), but may be overridden by page css. Buttons are consistently about 
2px bigger than fields. Note that with fixed text size, Opera shrinks 
fields a couple of pixels too much.

Here is my current test code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html40/loose.dtd">
<html>
<head>
<title> Test for relative form element sizing </title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<style type="text/css">
  body {background:#eee; color:#111;}
	.button {border:1px solid; background: #ffc; color:#060;} /*separate 
because IE ignores all styles if an attribute selector is in the same 
selector set*/
	input[type="submit"] {border:1px solid; background: #fcc; color:#060;}
	.larger input, .larger select {font-size: 1.5em;}
	.smaller input, .smaller select {font-size: 75%;}
	.fixed input, .fixed select {font-size: 10px;}
</style>
</head>

<body>
<form method="post" action="">
	<p>
		<input type="text" name="foo" value="lorem ipsum">
		<input type="submit" class="button">
		<select name="bar">
			<option>optional</option>
			<option>extra</option>
		</select>Page text
	</p>
	<p class="larger">
		<input type="text" name="foo" value="lorem ipsum">
		<input type="submit" class="button">
		<select name="bar2">
			<option>optional</option>
			<option>extra</option>
		</select>Page text
	</p>
	<p class="smaller">
		<input type="text" name="foo" value="lorem ipsum">
		<input type="submit" class="button">
		<select name="bar3">
			<option>optional</option>
			<option>extra</option>
		</select>Page text
	</p>
	<p class="fixed">
		<input type="text" name="foo" value="lorem ipsum">
		<input type="submit" class="button">
		<select name="bar4">
			<option>optional</option>
			<option>extra</option>
		</select>Page text
	</p>
</form>
</body>
</html>

-- 
Richard Grevers
Between two evils always pick the one you haven't tried

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Form field vs button sizing

Sent by Richard Grevers on 30 September 2003 02:02