usage of   to keep input and label together

ckirchho

Hallo,

In a form I have several text or checkbox inputs with their
appropriate labels. I'd like to keep label and input together, so I
connect them with a  , like:
<input type="checkbox" name="h" value="1" id="chk"/>&nbsp;<label
for="chk">Schreibweisentolerant</label>

Apparently this doesn't work in Firefox 2. It works in IExplorer and
Opera. As well I tried:
<input type="checkbox" name="h" value="1" id="chk"/><label
for="chk">&nbsp;Schreibweisentolerant</label>

Somehow Firefox seems to think that he can break anyway between tags.
If I placed another &nbsp; within the word "Schreibweisentolerant"...

<input type="checkbox" name="h" value="1" id="chk"/><label
for="chk">&nbsp;Schreibweisen&nbsp;tolerant</label>

....Firefox would keep the two parts of the word together.

Is there any way to correct this?

Best regards,

Christian Kirchhoff

Feb 12 '07 #1

Jukka K. Korpela

Scripsit ck******@directmedia.de:

In a form I have several text or checkbox inputs with their
appropriate labels. I'd like to keep label and input together,

Fine, but that's usually a non-issue. It becomes a problem if you make it a
problem by trying to squeeze the content into some smallish fixed-width or
otherwise narrow area. Usually the best fix is to stop creating such
problems. Normally a form should take all the available width and should
contain a single input item (an input field and the associated label) on one
line.

<input type="checkbox" name="h" value="1" id="chk"/><label
for="chk">&nbsp;Schreibweisentolerant</label>

Somehow Firefox seems to think that he can break anyway between tags.

I'd rather say that it treats the checkbox element as a special element
rather than comparable to a letter.

Is there any way to correct this?

As I wrote above, remove the techniques you use to "force" the data into a
narrow area, and the problem vanishes in a puff of smoke.

But technically, you can force Firefox to keep the checkbox and its label on
the same line by wrapping them inside a <divelement and setting
white-space: nowrap for it. Contrary to its name, the white-space property
affects line breaks in general, and the value nowrap forbids all line breaks
except those explicitly indicated by the use of <bror comparable
constructs.

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

Feb 12 '07 #2

ckirchho

Thanks for the answer. I am not responsible for the html text of the
page, I just take care of the CSS. And if the html code is build in a
way that more than one input field is in one line of the form, then
that's the way it is and there is no use for me to discuss about it.

Even if there is only one input per line, e.g.:
<label>Volltextsuche
<input type="text" name="e" value="a" size="30" />
</label>

If the user narrows the width of the browser window to a certain
extent, the input text field breaks into a second line. With my
question I was just wondering if it is possible to keep an input
element and it's label text together with &nbsp;, no matter whether
there are several input elements in one line or just one.

Because IExplorer seems to do that but Firefox not.

I'll keep the alternative with div and white-space: nowrap in mind,
thanks very much.

best regards,

Christian Kirchhoff

Feb 14 '07 #3

Jukka K. Korpela

Scripsit ck******@directmedia.de:

Thanks for the answer.

Please learn to quote the relevant part of the message you are commenting
on. Try googling for e.g. "wie zitiere ich im usenet".

I am not responsible for the html text of the
page, I just take care of the CSS.

When the HTML needs fixing, the person responsible for the CSS part shall
report the need.

By the way, do you realize that you are now trying to restrict the scope of
discussion to CSS and exclude HTML considerations, despite the fact that you
had decided to post to a group that specifically deals with HTML, not CSS?

And if the html code is build in a
way that more than one input field is in one line of the form, then
that's the way it is and there is no use for me to discuss about it.

If someone wants to keep poorly designed HTML (did you actually _check_
this?), then he should deal with the consequences as well. He won't know
about the consequences unless someone tells him.

Even if there is only one input per line, e.g.:
<label>Volltextsuche
<input type="text" name="e" value="a" size="30" />
</label>

If the user narrows the width of the browser window to a certain
extent, the input text field breaks into a second line.

That's what _should_ happen, too. It would be foolish to force the label and
the input field to appear on the same line at the cost of forcing the user
to scroll if he wants to see all of the input box.

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

Feb 14 '07 #4

Mumia W.

On 02/14/2007 10:05 AM, ck******@directmedia.de wrote:

Thanks for the answer. I am not responsible for the html text of the
page, I just take care of the CSS. And if the html code is build in a
way that more than one input field is in one line of the form, then
that's the way it is and there is no use for me to discuss about it.

Even if there is only one input per line, e.g.:
<label>Volltextsuche
<input type="text" name="e" value="a" size="30" />
</label>

If the user narrows the width of the browser window to a certain
extent, the input text field breaks into a second line. [...]

Not if you place a style of "white-space: nowrap" on label elements:

label {
white-space: nowrap;
}
--
Windows Vista and your freedom in conflict:
http://techdirt.com/articles/20061019/102225.shtml

Feb 14 '07 #5