I'm trying to layout a couple text input fields and their
corresponding labels without using a table. When I was trying to
debug my understanding of CSS, I was *very* surprised to see that
span's with borders behave counter-intuitively (IMHO) when using
style="white-space: nowrap;".
Below is a fairly small chunk of XHTML that demonstrates what I'm
talking about. What gives?
-Mark
--------------snip----------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>HTML 4.01 & CSS 2.0 Test Page</title>
</head>
<body>
<div>
<h1>“nowrap” Test</h1>
Here’s a test of a <b>div</b> with style="white-space:
nowrap;": <hr />
<div style="white-space: nowrap; border: 1px solid black;">
Line 1<br />
Line 2</div>
<hr />So far, so good.<br />
<br />
Here’s the same thing using a <b>span</b> with
style="white-space: nowrap;":
<hr /><span style="white-space: nowrap; border: 1px solid
black;">Line 1<br />
Line 2</span> <hr />Why is the border so foobar’d? I would have
expected the
span to be enclosed in a box.<br />
<br />
In FP 2003 it previews with no border at all. In IE6 and Opera 7.23
the border
encloses the top, left, and bottom of line 1 and the top, bottom, and
right
of line 2.<br />
<br />
<br />
What I’m trying to do: <hr />
<form action="css-sample.html">
<div style="white-space: nowrap; display: inline;">
<input type="text" size="10" id="First1" /><br />
<label for="First1" style="font-size: xx-small;">First</label></div>
<div style="white-space: nowrap; display: inline;">
<input type="text" size="10" id="Last1" /><br />
<label for="Last1" style="font-size: xx-small;">Last</label></div>
</form>
<hr /><br />
<br />
What I’m forced to do: <hr />
<form action="css-sample.html">
<table style="border-collapse: collapse" cellspacing="0"
cellpadding="0">
<tbody>
<tr>
<td><input type="text" size="10" id="First2" /><br />
<label for="First2" style="font-size:
xx-small;">First</label></td>
<td><input type="text" size="10" id="Last2" /><br />
<label for="Last2" style="font-size: xx-small;">Last</label></td>
</tr>
</tbody>
</table>
</form>
<hr /></div>
</body>
</html>
