By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,301 Members | 1,766 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,301 IT Pros & Developers. It's quick & easy.

white-space nowrap

P: n/a
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 &amp; CSS 2.0 Test Page</title>
</head>

<body>

<div>
<h1>&ldquo;nowrap&rdquo; Test</h1>
Here&rsquo;s a test of a <b>div</b> with style=&quot;white-space:
nowrap;&quot;: <hr />
<div style="white-space: nowrap; border: 1px solid black;">
Line 1<br />
Line 2</div>
<hr />So far, so good.<br />
<br />
Here&rsquo;s the same thing using a <b>span</b> with
style=&quot;white-space: nowrap;&quot;:
<hr /><span style="white-space: nowrap; border: 1px solid
black;">Line 1<br />
Line 2</span> <hr />Why is the border so foobar&rsquo;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&rsquo;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&rsquo;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>
Jul 20 '05 #1
Share this question for a faster answer!
Share on Google+

This discussion thread is closed

Replies have been disabled for this discussion.