List of checkboxes does not line up with label.

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="AccountAdmin"/>
<label for="AccountAdmin">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">Sales</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

"Steve" <ngroups (AT) digitalnothing (DOT) com> wrote

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

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.

ul style="list-style:none; margin-top:0; margin-left:0; padding-left:0;"
li style="margin-left:0;"><input type="checkbox" id="AccountAdmin"/
label for="AccountAdmin">Account Admin</label></li

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="AccountAdmin"/>&nbsp;<label ...

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

div class="field-set"
label class="field-label">Contact Roles:</label


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.

No, the label tag may not be appropriate(maybe 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.

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="AccountAdmin"/>&nbsp;<label ...

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

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

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.


I'm not sure what you mean by this. How about a url?

div class="field-set"


why not <fieldset>?

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

"Steve" <ngroups (AT) digitalnothing (DOT) com> wrote

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

This is too esoteric for me. As far as I can tell they are identical. :-)

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

Nope!

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


This is too esoteric for me. As far as I can tell they are identical. :-)

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">Contact 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

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.

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

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.

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

Thanks,
Steve