Checkbox multi column alignment

[totalstranger]

I have a check box with let's say 20 elements. I would like to have it
align as 4 columns, 5 rows. Without using a table and using
understandable CSS is there any way to make the check boxes align as I
would like?

I've been playing with the following selector in my attempts to get at
the text portion: input[type="checkbox"] + * {width:180px;}
So far my attempts have produced weirdness in FF and nothing occurs in IE7.

Although beyond the scope of this Newsgroup, when a span is placed
around each checkbox the following Javascript does cause the elements to
align in IE7, but not FF or Opera
<span><INPUT TYPE='checkbox' NAME='Countries[]' VALUE='US' >United
States</span>

var Boxes = document.getEle mentsByName("Co untries[]")
for(i=0; i<Boxes.length ; i++)
{
Boxes[i].parentNode.sty le.width = 180 + "px"
}
Thank you

[Ben C]

On 2007-03-31, Jukka K. Korpela <jk******@cs.tu t.fiwrote:

Sub titulo "Re: Checkbox multi column alignment"
cripsit Ben C:

>Has display:inline-block, as specified by CSS 2.1, ever worked on any
or any other day, even for a page containing the string "42", in any
version of IE, ever?

Surely. The magic needed is not very magical in this case: you need to set
the width of the element. The main problem with display: inline-block on IE
is that the width incorrectly defaults to the available width.

This of course defeats much of the potential use, but display: inline-block
still partially works on IE. You can test this e.g. by using <spanmarkup
for some word in a paragraph and setting a width for it, and perhaps
background or border to make the width easier to see. IE will correctly
ignore the width setting, since <spanis by default an inline element. When
you set display: inline-block, the width starts working, as specified, and
the element still appears inline.

Maybe that would have been enough for the OP (not that I call it
"working"). But FF is still a problem. Now he could experiment with
-moz-inline-box, but better to stay on the beaten track I think and use
floats.

[totalstranger]

On or about 3/31/2007 1:46 AM, it came to pass that Jukka K. Korpela wrote:

Scripsit totalstranger:

>Not sure why you say it's not useful, this works perfectly FF 2.0.0.3,
Opera9 and IE7--Big Thank you. As a bonus when a click is done on the
Checkbox text the field is selected or unselected respectively.

It works technically, and the <labelmarkup indeed makes the checkboxes
toggleable by clicking on the text too. But "it" referred to the whole
idea of creating a large set of checkboxes. Actually I have assumed that
you actually meant to use _radio buttons_, to allow a "1 out of many"
choice, rather than checkboxes, which allow "any out of many" choices.
Now that I come to think of, if you _really_ need the latter, the
checkboxes might make sense after all, in some cases.

>My issue with this form is that many countries, and many of their
respective states/provinces/regions/etc may be selected.

OK, I see. I was thinking about the much more common situation where a
single country (or state or province) is to be selected, e.g. the
country where the user lives. Authors often do such things with <select>
elements with all the countries they ever heard of, which is bad, or
with a similarly large set of radio buttons, which is bad too, insted of
simply letter the user type "US" or "USA" or "United States", or
something like that. For multiple choices, text input approach works
too, but in cases like yours, the checkboxes are probably a better idea.

For a 1 out of many I generally prefer select boxes, aka dropdowns. Most
readers/users simply don't understand how to use a multiple select box
while holding the CTRL key, and they are difficult to use when the
number of elements is very large. In this case I use an AJAX search
control pulling a subset of the data from the database for the select box.

(Back to the checkbox CSS issue)
Sometimes the checkbox does not show the way I expect in FF when an
unrelated bit of HTML is hidden using ECMAscript/Javascript. I have to
try this in IE and Opera.

This page establishes regional geographical editions. My focus at this
point is getting it to work so I can properly load a MySql table, then
use the table as part of my plan to fully internationaliz e my site.
After that I'll get back to the making this page look good.

Arn
http://www.arnb.org/Schedule.php