proper and portable way to group elements

[Chris Riesbeck]

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</labelwith
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

[Harlan Messinger]

Re: proper and portable way to group elements

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</labelwith
white-space:nowrap on label, but this only seems to work in Firefox and
IE 7.

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

?

[Stanimir Stamenkov]

Re: proper and portable way to group elements

Tue, 06 May 2008 15:30:48 -0500, /Chris Riesbeck/:

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</labelwith
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/~ries...ie-nowrap.html

In your actual source you have:

<label>
<input ...text
</label>

I've found if you put the closing </labeltag right after the text
it gets as expected:

<label>
<input ...text</label>

Probably bug in Opera but there may be another explanation.

--
Stanimir

[Stanimir Stamenkov]

Re: proper and portable way to group elements

Wed, 07 May 2008 02:53:41 +0300, /Stanimir Stamenkov/:

Tue, 06 May 2008 15:30:48 -0500, /Chris Riesbeck/:
>

>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</labelwith
>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/~ries...ie-nowrap.html

>
In your actual source you have:
>
<label>
<input ...text
</label>
>
I've found if you put the closing </labeltag right after the text it
gets as expected:
>
<label>
<input ...text</label>
>
Probably bug in Opera but there may be another explanation.

Safari on Windows acts even more strange (with the original
example): it "groups" every check box with the text of the previous
label. Putting the closing </labelright after the text seems to
correct it with it, too. IE 6 seems o.k. in both cases.

--
Stanimir

[Jukka K. Korpela]

Re: proper and portable way to group elements

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</labelwith
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 <tdelements, the
nonstandard but widely supported <nobrelement, 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 <nobrdoes 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><i nput ...>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/~ries...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/

[Chris Riesbeck]

Re: proper and portable way to group elements

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</labelwith
>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.

[Chris Riesbeck]

Re: proper and portable way to group elements

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_ROL ES"USER_ROLES
</label>

to the following (each item on one line):

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

...
>
I have yet to see a situation where <nobrdoes 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><i nput ...>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/~ries...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.

[Jukka K. Korpela]

Re: proper and portable way to group elements

Scripsit Chris Riesbeck:

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.

That's an interesting bug (by HTML specs, a line break is equivalent to
a space or, in some cases, ignored, but browsers are known to get this
wrong at times). However, my point was that the page should be designed
so that in the visual presentation, you have just the checkbox and its
label on one line, with no other content on that line and with no width
limitation except the natural canvas width. This generally removes the
line breaking problem in a puff of logic.

In one experiment, I used NOBR instead of LABEL

The NOBR markup is for preventing line breaks, not a replacement for any
other element, especially not for a logical element like LABEL.

--
Jukka K. Korpela ("Yucca")

http://www.cs.tut.fi/~jkorpela/