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

CSS with <INPUT><LABEL></LABEL></INPUT>

P: n/a
TR
Is it possible with CSS to prevent this wrapping alignment with a checkbox
with a nested label?
[ ] This is the label of the
checkbox that wraps beneath it
I'd prefer it looked like this, with a flush left margin:
[ ] This is the label of the
checkbox that stays flush on its left margin

That is, the letter "T" of "This" is directly above the "c" of "checkbox",
rather than the INPUT [ ] being directly above the word "checkbox".

Can this flush left margin, with long labels that wrap, be achieved with
this markup? It seems it can't be done without unnesting the label from the
INPUT and wrapping INPUT and LABEL in separate DIVs.

<div class="chkitem">
<input id="box9221" type="checkbox" class="chkbox">
<label>
<a id="9221" href="http:/www...">This is the label ...</a>
</label>
</input>
</div>

Thanks for any help!
TR
Jul 21 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
TR wrote:
Is it possible with CSS to prevent this wrapping alignment with a checkbox
with a nested label?
[ ] This is the label of the
checkbox that wraps beneath it
I'd prefer it looked like this, with a flush left margin:
[ ] This is the label of the
checkbox that stays flush on its left margin

That is, the letter "T" of "This" is directly above the "c" of "checkbox",
rather than the INPUT [ ] being directly above the word "checkbox".

Can this flush left margin, with long labels that wrap, be achieved with
this markup? It seems it can't be done without unnesting the label from the
INPUT and wrapping INPUT and LABEL in separate DIVs.

<div class="chkitem">
<input id="box9221" type="checkbox" class="chkbox">
<label>
<a id="9221" href="http:/www...">This is the label ...</a>
</label>
</input>
</div>


There's no such thing as </input>. Also, you left out the "for"
attribute of the LABEL tag, so there's no indication whatsoever what
field it's supposed to apply to.

You want something like:

div.chkitem { width: 30em; }
div.chkitem label { float: right; width: 28em; }
input.chkbox { width: 2em; }

....

<div class="chkitem">
<label for="box9221">
<a id="9221" href="http:/www...">This is the label ...</a>
</label>
<input id="box9221" type="checkbox" class="chkbox">
</div>

OR

div.chkitem { width: 30em; }
div.chkitem label { display: block; margin-left: 2em; }
input.chkbox { float: left; width: 2em; }

....

<div class="chkitem">
<input id="box9221" type="checkbox" class="chkbox">
<label for="box9221">
<a id="9221" href="http:/www...">This is the label ...</a>
</label>
</div>
Jul 21 '05 #2

P: n/a
Harlan Messinger wrote:
TR wrote:

[...]
Can this flush left margin, with long labels that wrap, be achieved with
this markup? It seems it can't be done without unnesting the label
from the
INPUT and wrapping INPUT and LABEL in separate DIVs.

<div class="chkitem">
<input id="box9221" type="checkbox" class="chkbox">
<label>
<a id="9221" href="http:/www...">This is the label ...</a>
That ID is invalid - names and IDs must start with a letter.

<URL:http://www.w3.org/TR/html4/types.html#type-name>
</label>
</input>
</div>

There's no such thing as </input>. Also, you left out the "for"
attribute of the LABEL tag, so there's no indication whatsoever what
field it's supposed to apply to.


In W3C conforming browsers, if a label has no 'for' attribute, it is
associated with its contents.

"for = idref [CS]
"This attribute explicitly associates the label being defined with
another control. When present, the value of this attribute must be
the same as the value of the id attribute of some other control in
the same document. When absent, the label being defined is
associated with the element's contents."

<URL:http://www.w3.org/TR/html4/interact/forms.html#adef-for>

However, IE does not conform in regard to the last statement.

[...]

--
Rob
Jul 21 '05 #3

P: n/a
RobG wrote:
Harlan Messinger wrote:

In W3C conforming browsers, if a label has no 'for' attribute, it is
associated with its contents.

"for = idref [CS]
"This attribute explicitly associates the label being defined with
another control. When present, the value of this attribute must be
the same as the value of the id attribute of some other control in
the same document. When absent, the label being defined is
associated with the element's contents."


Right, but in the OP's code the control isn't inside the LABEL element
either. Therefore, the label text isn't associated with the control,
rendering it functionally useless.
Jul 21 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.