horizontal alignment of checkboxes in a form - Solved
I am trying to align three checkboxes horizontally on a form. On this page http://dsweb2.oed.umn.edu/doc-con-submit-files.html I would like the checkboxes for Kurzweil, RTF and Other to show up on one line on after the other. How could I accomplish this?
I also noticed that there is a "Group" checkbox in the backend next to each option. I am not entirely sure what checking this box means.
Thanks for any hints.
Re: horizontal alignment of checkboxes in a form
This string is screwing up the output of your checkboxes:
Code:
#contact_us_form label{
width:130px;
float:left;
display:block;
margin:5px 0 0;
padding:0;
text-align:right;}
Not gonna break it down for you though XD
Re: horizontal alignment of checkboxes in a form
wild guess would be either/or the width, float, and text-align...
Re: horizontal alignment of checkboxes in a form
thanks for the pointers! I will dig into it.
Re: horizontal alignment of checkboxes in a form
ps, mechaflash lost his money... :lol:
Re: horizontal alignment of checkboxes in a form
:cry: (display :?: ) don't make me screw with it and waste a bunch of time :D
Re: horizontal alignment of checkboxes in a form
It has to do with the width and margins set to input and label. If you remove the margins, you'll notice that the checkboxes begin to line up. Since label and input are shared and there are tons of CSS strings pointing to to those elements... you may want to just go ahead and be more specific on the CSS targeting and isolate them to manipulate their positioning better.
EDIT:
Good enough Vera? XD
Re: horizontal alignment of checkboxes in a form
I'll give you half the points :D The margin's don't need to change. It's the widths and two other important part that you didn't name yet ;)
Although usually I would like people to figure it out themselves using some hints here is an almost complete possible answer:
Code:
#contact_us_form #lbl_23_0,
#contact_us_form #lbl_23_1,
#contact_us_form #lbl_23_2 {
width: auto;
display: inline;
float: none;
}
#contact_us_form #opt_23_0,
#contact_us_form #opt_23_1,
#contact_us_form #opt_23_2 {
width: auto;
}
It misses the left margin, but the ts will see that when trying. Perhaps there are other solutions as well, but they all need to change the display, width and possibly the float. :?
Re: horizontal alignment of checkboxes in a form
eh... i'm only about 4 months into CSS... i'll take 75% XD (and i hate tables :? )
Re: horizontal alignment of checkboxes in a form
Quote:
Originally Posted by mechaflash
eh... i'm only about 4 months into CSS... i'll take 75% XD (and i hate tables :? )
I love tables. The thing is they are typically not the easiest way to build a layout ;)
Re: horizontal alignment of checkboxes in a form - Solved
Thank you Vera, your code did the trick. I would probably not have been able to resolve it on my own.