Prev: Multiple CSS Classes
Next: padding and margin units
From: Chris Riesbeck on 6 May 2008 16:30
What's the right way to make sure checkboxes stick with their labels
when the window is resized?

Right now I'm trying <label><input ...> text</label> with
white-space:nowrap on label, but this only seems to work in Firefox and
IE 7.

In IE 8 and Opera I get one long line, as if the nowrap applied outside
the label elements.

In Safari for Windows, it groups the text with the checkbox on the right
instead of the left! That one I can't figure at all.

http://www.cs.northwestern.edu/~riesbeck/demo/ie-nowrap.html
From: Harlan Messinger on 6 May 2008 18:20
Chris Riesbeck wrote:
> What's the right way to make sure checkboxes stick with their labels
> when the window is resized?
>
> Right now I'm trying <label><input ...> text</label> with
> white-space:nowrap on label, but this only seems to work in Firefox and
> IE 7.

<label><input ...>&nbsp;text</label>

?
From: Jukka K. Korpela on 7 May 2008 04:10
Scripsit Chris Riesbeck:

> What's the right way to make sure checkboxes stick with their labels
> when the window is resized?

To put the checkbox and its label on a separate line with no other
content and to make the label as short as possible (but not shorter).
Under any normal circumstances, this removes the risk of line wrapping.
It is also an essential accessibility and usability feature. A user who
sees or hears
.... foo [ ] bar [ ] zap [ ] zip ...
may have difficulty in understanding whether he should click on the box
_before_ "bar" or _after_ "bar" when he wants to select "bar".
Admittedly, this might indicate slowness of understanding, or even
retardedness. Accessibility means, among other things, making pages
accessible to retarded people, too.

> Right now I'm trying <label><input ...> text</label> with
> white-space:nowrap on label, but this only seems to work in Firefox
> and IE 7.

It's a technically correct way to prevent line breaks inside <label>
elements, but for some odd reason, line breaking control works oddly.
There are many ways to prevent line breaks in HTML documents, such as
the above CSS setting, the nowrap attribute for <td> elements, the
nonstandard but widely supported <nobr> element, the no-break space
character and other characters defined to be "non-breaking", including
special controls in Unicode. And the different ways work under different
conditions, with little logic. For a summary, check
http://www.cs.tut.fi/~jkorpela/html/nobr.html#prevent

I have yet to see a situation where <nobr> does not work, but you might
have difficulties in explaining things to a pointy-haired boss who has
been commanded to require "standards compliance". So what _I_ would do -
if I really wanted to make the best effort to prevent a line break in
this case - is
<nobr><label><input ...>text</label></nobr>

> In IE 8 and Opera I get one long line, as if the nowrap applied
> outside the label elements.

Sounds like a refreshingly nasty bug. But IE 8 is beta test software, so
nobody should care what it does, except people devoted to testing the
software. (I'd love to test it, but why would I do that for free? It's
hard work.)

> In Safari for Windows, it groups the text with the checkbox on the
> right instead of the left! That one I can't figure at all.

Neither can I, but I think we can draw the conclusion that the approach,
though technically correct, just isn't feasible.

> http://www.cs.northwestern.edu/~riesbeck/demo/ie-nowrap.html

IT'S BETTER NOT TO SHOUT. Text is more readable in mixed-case. If you
really love all-caps presentation, you could make the _content_
mixed-case and set text-transform: uppercase in CSS. This would imply
that by switching CSS support off, the user sees the content more
readably.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

From: Chris Riesbeck on 7 May 2008 14:58
Harlan Messinger wrote:
> Chris Riesbeck wrote:
>> What's the right way to make sure checkboxes stick with their labels
>> when the window is resized?
>>
>> Right now I'm trying <label><input ...> text</label> with
>> white-space:nowrap on label, but this only seems to work in Firefox
>> and IE 7.
>
> <label><input ...>&nbsp;text</label>
>

I'd tried that also. It changed which browsers behaved well and which
badly but still didn't lead to the desired grouping over my test browsers.
From: Chris Riesbeck on 7 May 2008 15:26
Jukka K. Korpela wrote:
> Scripsit Chris Riesbeck:
>
>> What's the right way to make sure checkboxes stick with their labels
>> when the window is resized?
>
> To put the checkbox and its label on a separate line with no other
> content and to make the label as short as possible (but not shorter).

Indeed, it seems to be the internal line breaks that confused so many
browsers. Eliminating them, and simply setting white-space:nowrap on
LABEL fixed the problem in IE 7, IE 8, FF, Safari, and Opera. I.e., changing

<label>
<input type="checkbox" name="table" value="USER_ROLES"> USER_ROLES
</label>

to the following (each item on one line):

<label><input type="checkbox" name="table" value="USER_ROLES">
USER_ROLES</label>

> ...
>
> I have yet to see a situation where <nobr> does not work, but you might
> have difficulties in explaining things to a pointy-haired boss who has
> been commanded to require "standards compliance". So what _I_ would do -
> if I really wanted to make the best effort to prevent a line break in
> this case - is
> <nobr><label><input ...>text</label></nobr>

In one experiment, I used NOBR instead of LABEL and got the same varied
results. I didn't try NOBR + LABEL, but since LABEL + nowrap + no
internal line breaks works, I'll stick with that for now.

> ....But IE 8 is beta test software, so
> nobody should care what it does, except people devoted to testing the
> software. (I'd love to test it, but why would I do that for free? It's
> hard work.)

I tried IE 8 to see if it fixed an unrelated bug I had in IE 7. (It did.)

>> http://www.cs.northwestern.edu/~riesbeck/demo/ie-nowrap.html
>
> IT'S BETTER NOT TO SHOUT. Text is more readable in mixed-case.

The demo page is a static copy of a JSP dump for developers of table
names in a database. Names are uppercase internally. The internal line
breaks were there to make the JSTL FOR-loop easier to read. Go know the
trouble that would cause.

Thanks, everyone.
 | 
Pages: 1
Prev: Multiple CSS Classes
Next: padding and margin units