List of checkboxes does not line up with label.

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Steve - 25 Aug 2004 02:36 GMT

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

Reply to this Message

Harlan Messinger - 25 Aug 2004 14:43 GMT

> 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
[quoted text clipped - 13 lines]
> <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"/> <label ...

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

Reply to this Message

Steve - 25 Aug 2004 17:00 GMT

>><div class="field-set">
>><label class="field-label">Contact Roles:</label>
[quoted text clipped - 3 lines]
> 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
[quoted text clipped - 4 lines]
> all on one line. (Instead of the  , 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

Reply to this Message

Brian - 25 Aug 2004 18:32 GMT

> The display should look something like this:
>
[quoted text clipped - 7 lines]
> O Technical
> O Sales

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

Signature

Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Reply to this Message

Harlan Messinger - 25 Aug 2004 19:12 GMT

> The problem is that I *do* want line breaks in the list. The display
> should look something like this:
[quoted text clipped - 8 lines]
> 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!

Reply to this Message

Steve - 25 Aug 2004 20:41 GMT

>>The problem is that I *do* want line breaks in the list. The display
>>should look something like this:
[quoted text clipped - 10 lines]
>
> 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

Reply to this Message

Steve - 26 Aug 2004 00:28 GMT

> 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

Reply to this Message

Steve - 27 Aug 2004 15:40 GMT

> 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

Reply to this Message

Brian - 27 Aug 2004 17:33 GMT

> http://www.digitalnothing.com/alignmentProblem.html
>
> Hopefully that page will finally make my problem clear. The problem
> occurs in both Firefox and IE.

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.

Signature

Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Reply to this Message

Brian - 25 Aug 2004 17:56 GMT

> I'm not sure if I should be using tables here to structure the layout or
> if CSS is okay.

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/

> 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>?

Signature

Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Reply to this Message

Steve - 25 Aug 2004 18:18 GMT

>> 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
[quoted text clipped - 7 lines]
>
> 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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2004

List of checkboxes does not line up with label.