List of checkboxes does not line up with label.

[Steve]

I'm not sure if I should be using tables here to structure the layout or
if CSS is okay. I have a data entry form in which I have floated the
labels to one side, and given them a specific width. With regular input
such as textboxes, everything lines up fine. The problem I'm having is
that I have an unordered list of checkboxes, and only the first item
will line up with the label. The additional checkboxes and their labels
end up being rendered directly below the label. How can I keep the list
lined up straight, and flush with the right edge of the label like the
other fields are?

I should also note that I tried wrapping the list in a div and setting
the margin-left property to the same offset as the label width, but it
did not line up, instead it started a good bit farther to the right of
the label's right edge.

<div class="field-set">
<label class="field-label">Contact Roles:</label>
<ul style="list-style:none; margin-top:0; margin-left:0; padding-left:0;">
<li style="margin-left:0;"><input type="checkbox" id="AccountAdmi n"/>
<label for="AccountAdm in">Account Admin</label></li>
<li style="margin-left:0;"><input type="checkbox" id="Technical"/>
<label for="Technical" >Technical</label></li>
<li style="margin-left:0;"><input type="checkbox" id="Sales"/> <label
for="Sales">Sal es</label></li>
</ul>
</div>

div.field-set {
margin-bottom:3px;
}

label.field-label {
float:left;
width:17em;
margin-right:.5em;
font-weight:bold;
font-size:.85em;
margin-top:.15em;
background-color:#F8F8F8;
padding-top:4px;
/*padding:4px 0px 4px 4px;*/
}

Thanks,
Steve

[Harlan Messinger]

Re: List of checkboxes does not line up with label.


"Steve" <ngroups@digita lnothing.com> wrote in message
news:P2SWc.1373 7$ni.49@okeprea d01...[color=blue]
> I'm not sure if I should be using tables here to structure the layout or
> if CSS is okay. I have a data entry form in which I have floated the
> labels to one side, and given them a specific width. With regular input
> such as textboxes, everything lines up fine. The problem I'm having is
> that I have an unordered list of checkboxes, and only the first item
> will line up with the label. The additional checkboxes and their labels
> end up being rendered directly below the label. How can I keep the list
> lined up straight, and flush with the right edge of the label like the
> other fields are?
>
> I should also note that I tried wrapping the list in a div and setting
> the margin-left property to the same offset as the label width, but it
> did not line up, instead it started a good bit farther to the right of
> the label's right edge.
>
> <div class="field-set">
> <label class="field-label">Contact Roles:</label>[/color]

This isn't an appropriate use of the LABEL tag. "The LABEL element is used
to specify labels for controls that do not have implicit labels." Instead of
the DIV, why not use the FIELDSET tag which exists for this purpose? Then,
instead of LABEL, use the LEGEND tag.
[color=blue]
> <ul style="list-style:none; margin-top:0; margin-left:0; padding-left:0;">
> <li style="margin-left:0;"><input type="checkbox" id="AccountAdmi n"/>
> <label for="AccountAdm in">Account Admin</label></li>[/color]

You start your LABEL tags on new lines. A new line character is treated as
white space. Any white space is a legitimate place for the browser to insert
a line break. If you don't want a line break, have

... id="AccountAdmi n"/>&nbsp;<label ...

all on one line. (Instead of the &nbsp;, you could put half an em of left
padding on the label.)

[Steve]

Re: List of checkboxes does not line up with label.

[color=blue][color=green]
>><div class="field-set">
>><label class="field-label">Contact Roles:</label>[/color]
>
>
> This isn't an appropriate use of the LABEL tag. "The LABEL element is used
> to specify labels for controls that do not have implicit labels." Instead of
> the DIV, why not use the FIELDSET tag which exists for this purpose? Then,
> instead of LABEL, use the LEGEND tag.[/color]

No, the label tag may not be appropriate(may be a span would be better),
but this is just a snip from a greater list of items, which are in a
fieldset already. The class name on the div is misleading. It implies
more so a label/input pair of objects so that the proper margin can be
placed at the bottom.

[color=blue]
> You start your LABEL tags on new lines. A new line character is treated as
> white space. Any white space is a legitimate place for the browser to insert
> a line break. If you don't want a line break, have
>
> ... id="AccountAdmi n"/>&nbsp;<label ...
>
> all on one line. (Instead of the &nbsp;, you could put half an em of left
> padding on the label.)[/color]

The problem is that I *do* want line breaks in the list. The display
should look something like this:

Contact Roles: O Account Admin
O Technical
O Sales

Instead I am getting this:

Contact Roles: O Account Admin
O Technical
O Sales

Hopefully this explains what I'm looking to do a bit more clearly.

Thanks,
Steve

[Brian]

Re: List of checkboxes does not line up with label.

Steve wrote:
[color=blue]
> I'm not sure if I should be using tables here to structure the layout or
> if CSS is okay.[/color]

Either is ok.

Here's one using a table for markup:

http://www.bonfete.biz/contact/

Here's one with no table markup:

http://www.julietremblay.com/contact/

[color=blue]
> I have a data entry form in which I have floated the
> labels to one side, and given them a specific width. With regular input
> such as textboxes, everything lines up fine. The problem I'm having is
> that I have an unordered list of checkboxes, and only the first item
> will line up with the label.[/color]

I'm not sure what you mean by this. How about a url?
[color=blue]
> <div class="field-set">[/color]

why not <fieldset>?

--
Brian (remove ".invalid" to email me)

http://www.tsmchughs.com/

[Steve]

Re: List of checkboxes does not line up with label.

>> I have a data entry form in which I have floated the labels to one[color=blue][color=green]
>> side, and given them a specific width. With regular input such as
>> textboxes, everything lines up fine. The problem I'm having is that I
>> have an unordered list of checkboxes, and only the first item will
>> line up with the label.[/color]
>
>
> I'm not sure what you mean by this. How about a url?
>[color=green]
>> <div class="field-set">[/color]
>
>
> why not <fieldset>?[/color]

Please take a look at my response to Harlan, it answers the questions
you posed, and hopefully paints a better picture of what I'm looking to
accomplish.

Steve

[Brian]

Re: List of checkboxes does not line up with label.

Steve wrote:
[color=blue]
> The display should look something like this:
>
> Contact Roles: O Account Admin
> O Technical
> O Sales
>
> Instead I am getting this:
>
> Contact Roles: O Account Admin
> O Technical
> O Sales[/color]

Set a margin-left on the labels, and float "Contact Roles:" left, into
that margin.

--
Brian (remove ".invalid" to email me)

http://www.tsmchughs.com/

[Harlan Messinger]

Re: List of checkboxes does not line up with label.


"Steve" <ngroups@digita lnothing.com> wrote in message
news:8I2Xc.1426 3$ni.1062@okepr ead01...[color=blue]
> The problem is that I *do* want line breaks in the list. The display
> should look something like this:
>
> Contact Roles: O Account Admin
> O Technical
> O Sales
>
> Instead I am getting this:
>
> Contact Roles: O Account Admin
> O Technical
> O Sales[/color]

This is too esoteric for me. As far as I can tell they are identical. :-)
[color=blue]
>
> Hopefully this explains what I'm looking to do a bit more clearly.[/color]

Nope!

[Steve]

Re: List of checkboxes does not line up with label.

>>The problem is that I *do* want line breaks in the list. The display[color=blue][color=green]
>>should look something like this:
>>
>>Contact Roles: O Account Admin
>>O Technical
>>O Sales
>>
>>Instead I am getting this:
>>
>>Contact Roles: O Account Admin
>>O Technical
>>O Sales[/color]
>
>
> This is too esoteric for me. As far as I can tell they are identical. :-)
>[/color]

I apologize for that, my news client stripped out the tabs on each line
when I posted. When I get home tonight I'll try to put up a page
demonstrating what I'm trying to achieve, and what I'm getting. To try
and describe what was supposed to happen above though... The
"O"s(checkboxes ), and their labels should be lined up with each other to
the right of "Contact Roles" with "Contact Roles" having only white
space below it. Basically the same kind of effect that would be achieved
with a table:

<table>
<tr>
<td valign="top">Co ntact Roles:</td>
<td>
<ul style="margin-left:0; list-style:none;">
<li style="margin-left:0;">O Account Admin</li>
<li style="margin-left:0;">O Technical</li>
<li style="margin-left:0;">O Sales</li>
</ul>
</td>
</tr>
</table>

I don't know how many items are going to be in the list, because it is
going to be generated dynamically. If I did, then I would just specify
the proper height of the "Contact Roles" block. I tried setting the
margin-left property as recommended by Brian, but it doesn't line up
correct. Even if I specify the margin-left the same as the width of the
label, it ends up farther right than it should(about 5em off I believe).

Steve

[Steve]

Re: List of checkboxes does not line up with label.

[color=blue]
>
> I apologize for that, my news client stripped out the tabs on each line
> when I posted. When I get home tonight I'll try to put up a page
> demonstrating what I'm trying to achieve, and what I'm getting.[/color]

I have put up a page demonstrating what I want, and what I am encountering.

http://www.digitalnothing.com/alignmentProblem.html

Hopefully that page will finally make my problem clear. The problem
occurs in both Firefox and IE.

Thanks for trying to help guys.

Steve

[Steve]

Re: List of checkboxes does not line up with label.

> I have put up a page demonstrating what I want, and what I am
encountering.[color=blue]
>
> http://www.digitalnothing.com/alignmentProblem.html
>
> Hopefully that page will finally make my problem clear. The problem
> occurs in both Firefox and IE.
>[/color]

Does anyone have any thoughts or insight as to how I can achieve the
effect I want without tables?

Thanks,
Steve

[Brian]

Re: List of checkboxes does not line up with label.

Steve wrote:
[color=blue]
> http://www.digitalnothing.com/alignmentProblem.html
>
> Hopefully that page will finally make my problem clear. The problem
> occurs in both Firefox and IE.[/color]

I supppose this can be done with css, but what's wrong with the first
example in your document? You have a table. Use table markup. I'd lose
the presentation fluff in that example as much as possible, and use css
for that, but keep the table markup. You could change that first
class="field-label" to a <label> for the input, but otherwise it looks ok.

Oh, btw, please lose the microfonts. I've set a font size in my browser
for a reason.

--
Brian (remove ".invalid" to email me)

http://www.tsmchughs.com/