Stylesheets - CSS with <INPUT><LABEL></LABEL></INPUT>

Author

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

2005-05-25, 7:58 pm

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

Harlan Messinger

2005-05-25, 7:58 pm

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>

RobG

2005-05-26, 4:21 am

Harlan Messinger wrote:
> TR wrote:
>
[...]

That ID is invalid - names and IDs must start with a letter.

<URL:http://www.w3.org/TR/html4/types.html#type-name>
[color=darkred]
>
>
> 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

Harlan Messinger

2005-05-26, 7:38 pm

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.