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

List of checkboxes does not line up with label.

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a

"Steve" <ng*****@digitalnothing.com> wrote in message
news:P2SWc.13737$ni.49@okepread01...
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.)
Jul 20 '05 #2

P: n/a
<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

Jul 20 '05 #3

P: n/a
Steve wrote:
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>?

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #4

P: n/a
>> 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

Jul 20 '05 #5

P: n/a
Steve wrote:
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


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/
Jul 20 '05 #6

P: n/a

"Steve" <ng*****@digitalnothing.com> wrote in message
news:8I2Xc.14263$ni.1062@okepread01...
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!

Jul 20 '05 #7

P: n/a
>>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
Jul 20 '05 #8

P: n/a

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
Jul 20 '05 #9

P: n/a
> 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
Jul 20 '05 #10

P: n/a
Steve wrote:
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.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.