Page is a not externally linkable
rocknbil - 3:39 pm on Jun 27, 2008 (gmt 0)
Well, this is why I asked. :-) In a layout with multiple form inputs on one line, I'm using pixel sizing to gain a little more control over that line reflowing or hanging out of containing "rows" when text is resized. If you remove display:block from your sample, you will see what I mean. em and percent size text relatively, correct? Based on the user's text settings? Note how this works in my slight mods to your example. The height of the input fields changes with text resizing, but the width does not. In this example, this causes things to flow out of the legend box; normally I do some floats and whatnot to get the "columns" to align. But this explores the width of the fields. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I'm confused, why does "em" make it go wrong?
If the form fields are styled with a pixel width, they'll stay a set pixel width, so one only has to make allowances for resizing of the labels. (Sizing text by pixels is not respected by all browsers, so it will still change when resized.)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {font-size:100%; font-family:Arial, Helvetica, sans-serif}
label{}
#firstname, #lastname, #street { width:200px;}
#postcode { width:75px;}
form{ width: 600px; margin: auto; }
.form-row { width: 600px; white-space: nowrap; }
</style>
</head>
<body>
<form action="" method="get" name="davetheform">
<fieldset><legend>Your Details</legend>
<div class="form-row">
<label for="firstname">First Name:</label>
<input class="input" type="text" title="Enter your first name" maxlength="" size="" name="firstname" id="firstname" value="">
<label for="lastname">Last Name:</label>
<input class="input" type="text" title="Enter your Last name" maxlength="" size="" name="lastname" id="lastname" value="">
</div>
<div class="form-row">
<label for="street">Street Name:</label>
<input class="input" type="text" title="Enter your street name" maxlength="" size="" name="street" id="street" value="">
<label for="street">Post Code:</label>
<input class="input" type="text" title="Enter your postcode" maxlength="" size="" name="postcode" id="postcode" value="">
</div>
</fieldset>
</form>
</body>
</html>